Completed member card and integrated with backend

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

Hide file tree

Showing 4 changed files with 39 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env
diff --git a/src/app/members/page.jsx b/src/app/members/page.jsx
@@ -1,15 +1,19 @@
 import MemberCard from "@/components/members/MemberCard"
-import { demoMembers } from "@/lib/memberDemoData"
 
-export default function MembersPage () {
+export default async function MembersPage () {
+    let members = await fetch(process.env.STRAPI_BASE_URL+"/api/members?populate[posts][fields][0]=title&populate=image", {
+        headers: { Authorization: "Bearer " + process.env.STRAPI_API_KEY },
+        next: { revalidate: 0 }
+    })
+    let membersData = (await members.json()).data
     return (
         <main className="bg-secondary-800 pt-32 text-white">
-            <div className="max-w-4xl mx-auto">
+            <div className="max-w-5xl mx-auto px-4">
                 <h1 className="text-4xl font-bold">Our Team</h1>
                 <h2 className="text-primary-300 font-semibold">The people that make us great :)</h2>
 
-                <div className="py-5 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {demoMembers.map(member => <MemberCard member={member} key={member.id} />)}
+                <div className="py-10 grid xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 justify-center gap-6">
+                    {membersData.map(member => <MemberCard member={member.attributes} key={member.id} />)}
                 </div>
             </div>
         </main>

diff --git a/src/components/members/MemberCard.jsx b/src/components/members/MemberCard.jsx
@@ -7,42 +7,50 @@ 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 { name, sig, posts, github_id, linkedin_id, mail_id, image } = member
+
+
+    let imageURL = process.env.STRAPI_BASE_URL + image.data.attributes.formats.thumbnail.url
+    let postsArray = posts.data.map(post => post.attributes.title)
 
     let [ showSocials, setShowSocials ] = useState(null)
 
     let animation = "animate-[uncrop-card_0ms]"
-    let animationBigger = "animate-[uncrop-card-bigger_0ms]"
+    // let animationBigger = "animate-[uncrop-card-bigger_0ms]"
 
     if (showSocials) {
         animation = "animate-[crop-card_500ms]"
-        animationBigger = "animate-[crop-card-bigger_500ms]"
+        // animationBigger = "animate-[crop-card-bigger_500ms]"
     } else if (showSocials === false) {
         animation = "animate-[uncrop-card_500ms]"
-        animationBigger = "animate-[uncrop-card-bigger_500ms]"
+        // animationBigger = "animate-[uncrop-card-bigger_500ms]"
     }
 
     return (
-        <div className="relative">
-            <div className={`rounded-lg bg-primary-200 ${animationBigger} fill-mode-forwards p-[1px]`}>
+        <div className="relative h-full w-full max-w-60 mx-auto">
+            <div className={`rounded-lg bg-primary-100 ${animation} fill-mode-forwards p-[1px] h-full`}>
                 <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`}
+                    className={`rounded-lg bg-gray-950 overflow-hidden transition flex flex-col items-center p-6 pb-14 ${animation} fill-mode-forwards h-full`}
                 >
-                    <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>
+                    <img src={imageURL} alt="" className="rounded-lg w-full" />
+                    <h1 className="text-lg font-bold leading-5 mt-4 mb-3 text-center">{name}</h1>
+                    <div>
+                        {postsArray.map(post =>
+                            <h2 className="text-sm font-extrabold text-center mt text-primary-300">{post}</h2>
+                        )}
+                    </div>
                 </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`}
+                className={`h-10 text-primary-100 absolute bottom-0 right-0 p-2 flex gap-3 items-center justify-end overflow-hidden ${showSocials ? "w-[148px]" : "w-10"} duration-500 border-[1px] border-primary-100 rounded-br-lg`}
                 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 }
+                {/* { 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
@@ -79,6 +79,9 @@ module.exports = {
       },
     },
     extend: {
+      screens: {
+        "xs": "400px"
+      },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
@@ -103,21 +106,14 @@ module.exports = {
           },
         },
         "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%)" }
+          from: { "clip-path": "polygon(0 0, 102% 0, 102% calc(100% - 42px), calc(100% - 42px) calc(100% - 42px), calc(100% - 42px) 100%, 0 100%)" },
+          to: { "clip-path": "polygon(0 0, 102% 0, 102% calc(100% - 42px), calc(100% - 150px) calc(100% - 42px), calc(100% - 150px) 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%)" }
+          from: { "clip-path": "polygon(0 0, 102% 0, 102% calc(100% - 42px), calc(100% - 150px) calc(100% - 42px), calc(100% - 150px) 100%, 0 100%)" },
+          to: { "clip-path": "polygon(0 0, 102% 0, 102% calc(100% - 42px), calc(100% - 42px) calc(100% - 42px), calc(100% - 42px) 100%, 0 100%)" }
         },
+        // },
       },
 
       animation: {