Merge pull request #98 from NIAEFEUP/fix/guiaestudante/links

Fix/guiaestudante/links
NIAEFEUP · Dec 27, 2024 · a60f5d5 · a60f5d5
2 parents 6d9420a + 31368ac
commit a60f5d5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11,252 deletions.
diff --git a/components/Links/index.tsx b/components/Links/index.tsx
@@ -2,12 +2,13 @@
 
 import { Link } from "@/payload-types";
 import { motion } from "framer-motion";
+import { SquareArrowOutUpRight } from "lucide-react";
 
 interface Props {
-  links: Link[]
+  links: Link[];
 }
 
-const UsefulLinks = ({ links } : Props) => {
+const UsefulLinks = ({ links }: Props) => {
   return (
     <>
       <div className="animate_top mx-auto text-center">
@@ -32,28 +33,34 @@ const UsefulLinks = ({ links } : Props) => {
             <h2 className="text-2xl font-bold mb-6 text-center text-black">
               Useful Links
             </h2>
-            <div className="grid grid-cols-2">
-              {links.map((link,_index) => (
-                <div className="border solid rounded m-2 hover:shadow">
+            <div className="grid grid-cols-3 gap-4">
+              {links.map((link, index) => (
+                <div
+                  key={index}
+                  className="relative rounded hover:shadow group"
+                >
                   <a
                     href={link.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-base  p-1 dark:text-white text-white bg-[#97321D] rounded transition-colors duration-200 block text-center"
+                    className="flex items-center justify-between text-base py-2 px-4 dark:text-white text-white bg-[#97321D] rounded-lg transition-colors duration-200"
                   >
-                    {link.label}
+                    <span>{link.label}</span>
+                    <SquareArrowOutUpRight className="ml-2" />
                   </a>
-                  <p >
-                    {link.description}
-                  </p>
-
+                  {link.description && (
+                    <div className="max-h-0 overflow-hidden transition-[max-height] duration-300 ease-in-out group-hover:max-h-40">
+                      <div className="bg-gray-200 p-2 text-sm text-black">
+                        {link.description}
+                      </div>
+                    </div>
+                  )}
                 </div>
               ))}
             </div>
           </section>
         </motion.div>
       </div>
-      {/* Motion Section End */}
     </>
   );
 };