Added social links effect in members card

HridayM25 · May 7, 2024 · 4e0c9d0 · 4e0c9d0
1 parent 880c05f
commit 4e0c9d0
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/src/components/members/MemberCard.jsx b/src/components/members/MemberCard.jsx
@@ -1,21 +1,49 @@
+"use client"
+
 import Link from "next/link"
+import { useState } from "react"
 import { FaGithub, FaLinkedin } from "react-icons/fa"
-import { FaXTwitter } from "react-icons/fa6";
+import { FaXTwitter, FaLink } from "react-icons/fa6";
 import { IoMail } from "react-icons/io5"
 
 export default function MemberCard ({ member }) {
     let { name, sig, role, github_id, linkedin_id, mail_id, twitter_id, image } = member
 
+    let [ showSocials, setShowSocials ] = useState(null)
+
+    let animation = "animate-[uncrop-card_0ms]"
+    let animationBigger = "animate-[uncrop-card-bigger_0ms]"
+
+    if (showSocials) {
+        animation = "animate-[crop-card_500ms]"
+        animationBigger = "animate-[crop-card-bigger_500ms]"
+    } else if (showSocials === false) {
+        animation = "animate-[uncrop-card_500ms]"
+        animationBigger = "animate-[uncrop-card-bigger_500ms]"
+    }
+
     return (
-        <div className="rounded-lg overflow-hidden shadow-secondary-300 shadow transition hover:shadow-secondary-200 hover:-translate-y-2 duration-300 m-4 bg-secondary-600 cursor-pointer flex flex-col items-center p-6">
-            <img src={image} alt="" className="rounded-full h-40 w-40" />
-            <h1 className="text-2xl font-medium mt-4">{name}</h1>
-            <h2 className="text-sm font-extrabold text-primary-300">{role}</h2>
-            <div className="h-8 mt-4 flex gap-2 text-primary-100 items-center">
+        <div className="relative">
+            <div className={`rounded-lg bg-primary-200 ${animationBigger} fill-mode-forwards p-[1px]`}>
+                <div
+                    className={`rounded-lg bg-gray-950 overflow-hidden transition cursor-pointer flex flex-col items-center p-6 pt-14 ${animation} fill-mode-forwards`}
+                >
+                    <img src={image} alt="" className="rounded-full h-40 w-40" />
+                    <h1 className="text-2xl font-medium mt-4">{name}</h1>
+                    <h2 className="text-sm font-extrabold text-primary-300">{role}</h2>
+                </div>
+            </div>
+
+            <div 
+                className={`h-10 text-primary-100 absolute top-0 right-0 p-2 flex gap-3 items-center justify-end overflow-hidden ${showSocials ? "w-[180px]" : "w-10"} duration-500 border-[1px] border-primary-200 rounded-tr`}
+                onMouseOver={() => setShowSocials(true)}
+                onMouseOut={() => setShowSocials(false)}
+            >
                 { github_id ? <Link href={github_id} target="_blank"><FaGithub size={22}/></Link> : null }
                 { linkedin_id ? <Link href={linkedin_id} target="_blank"><FaLinkedin size={22} /></Link> : null }
                 { mail_id ? <Link href={`mailto:${mail_id}`}><IoMail size={25} /></Link> : null }
                 { twitter_id ? <Link href={twitter_id} target="_blank"><FaXTwitter size={22} /></Link> : null }
+                <FaLink size={24} className={`${showSocials ? "rotate-90 scale-[1.15]" : ""} duration-500 shrink-0 cursor-pointer`} />
             </div>
         </div>
     )

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -102,6 +102,22 @@ module.exports = {
               "rotatex(20deg) rotateZ(-20deg) skewX(20deg) translateZ(0) translateY(-100%)",
           },
         },
+        "crop-card": {
+          from: { "clip-path": "polygon(0 0, calc(100% - 42px) 0, calc(100% - 42px) 42px, 102% 42px, 102% 100%, 0 100%)" },
+          to: { "clip-path": "polygon(0 0, calc(100% - 182px) 0, calc(100% - 182px) 42px, 102% 42px, 102% 100%, 0 100%)" }
+        },
+        "uncrop-card": {
+          from: { "clip-path": "polygon(0 0, calc(100% - 182px) 0, calc(100% - 182px) 42px, 102% 42px, 102% 100%, 0 100%)" },
+          to: { "clip-path": "polygon(0 0, calc(100% - 42px) 0, calc(100% - 42px) 42px, 102% 42px, 102% 100%, 0 100%)" }
+        },
+        "crop-card-bigger": {
+          from: { "clip-path": "polygon(0 0, calc(100% - 42px) 0, calc(100% - 42px) 42px, 102% 42px, 102% 100%, 0 100%)" },
+          to: { "clip-path": "polygon(0 0, calc(100% - 182px) 0, calc(100% - 182px) 42px, 102% 42px, 102% 100%, 0 100%)" }
+        },
+        "uncrop-card-bigger": {
+          from: { "clip-path": "polygon(0 0, calc(100% - 182px) 0, calc(100% - 182px) 42px, 102% 42px, 102% 100%, 0 100%)" },
+          to: { "clip-path": "polygon(0 0, calc(100% - 42px) 0, calc(100% - 42px) 42px, 102% 42px, 102% 100%, 0 100%)" }
+        },
       },
 
       animation: {