From c8e4f52b0ae099fde7204bbff83f5a3ff2f61793 Mon Sep 17 00:00:00 2001
From: Eduarda Pinheiro <eduardapinheiro1302@gmail.com>
Date: Wed, 15 May 2024 22:03:04 -0300
Subject: [PATCH] feat: moves social session to the bottom and vacancies
 availability to the top

---
 src/components/card/index.tsx | 72 +++++++++++++++++------------------
 1 file changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
index 903b2fd..7ec48e6 100644
--- a/src/components/card/index.tsx
+++ b/src/components/card/index.tsx
@@ -22,35 +22,15 @@ export function Card({ shelter }: Props) {
 
   return (
     <CardBase key={shelter.id} className="w-full shadow-md">
-      <CardHeader>
-        <div className="flex justify-between">
-          <h4 className="text-lg font-medium">{shelter.name}</h4>
-          <div className="flex items-center space-x-3">
-            {shelter.facebook && (
-              <SocialLink
-                href={`https://facebook.com/${unmaskSocialMedia(shelter.facebook)}`}
-                icon={<FaFacebook size={18} />}
-                label="Facebook"
-              />
-            )}
-
-            {shelter.instagram && (
-              <SocialLink
-                href={`https://instagram.com/${unmaskSocialMedia(shelter.instagram)}`}
-                icon={<FaInstagram size={18} />}
-                label="Instagram"
-              />
-            )}
-
-            {shelter.twitter && (
-              <SocialLink
-                href={`https://twitter.com/${unmaskSocialMedia(shelter.twitter)}`}
-                icon={<RiTwitterXLine size={18} />}
-                label="Twitter"
-              />
-            )}
-          </div>
-        </div>
+      <CardHeader className="flex flex-col gap-1">
+        <h4 className="text-lg font-medium">{shelter.name}</h4>
+        {availableVacancies > 0 ? (
+          <p className="text-md font-semibold text-green-600">
+            Vagas disponíveis: {availableVacancies}
+          </p>
+        ) : (
+          <p className="text-md font-semibold text-red-600">Vagas esgotadas</p>
+        )}
         <Link
           href={`https://www.google.com/maps/search/${fullAddress}`}
           target="_blank"
@@ -101,15 +81,31 @@ dark:ring-offset-neutral-950 dark:hover:bg-neutral-50/90 dark:focus-visible:ring
           Entre em contato <FaWhatsapp />
         </a>
 
-        {availableVacancies > 0 ? (
-          <p className="text-md text-right font-semibold text-green-600">
-            Vagas disponíveis: {availableVacancies}
-          </p>
-        ) : (
-          <p className="text-md text-right font-semibold text-red-600">
-            Vagas esgotadas
-          </p>
-        )}
+        <div className="flex items-center space-x-3">
+          {shelter.facebook && (
+            <SocialLink
+              href={`https://facebook.com/${unmaskSocialMedia(shelter.facebook)}`}
+              icon={<FaFacebook size={20} />}
+              label="Facebook"
+            />
+          )}
+
+          {shelter.instagram && (
+            <SocialLink
+              href={`https://instagram.com/${unmaskSocialMedia(shelter.instagram)}`}
+              icon={<FaInstagram size={20} />}
+              label="Instagram"
+            />
+          )}
+
+          {shelter.twitter && (
+            <SocialLink
+              href={`https://twitter.com/${unmaskSocialMedia(shelter.twitter)}`}
+              icon={<RiTwitterXLine size={20} />}
+              label="Twitter"
+            />
+          )}
+        </div>
       </CardFooter>
     </CardBase>
   );