updating design of contributors card

ArslanYM · Jul 7, 2023 · 39e46e9 · 39e46e9
1 parent 471d2e6
commit 39e46e9
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 60 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -5,8 +5,8 @@ const nextConfig = {
     appDir: true,
   },
   images: {
-    domains: ["res.cloudinary.com", "github.com"],
+    domains: ["res.cloudinary.com", "github.com", "avatars.githubusercontent.com"],
   },
-}
+};
 
 export default nextConfig
diff --git a/src/app/contributors/page.tsx b/src/app/contributors/page.tsx
@@ -1,35 +1,41 @@
-import ContributorCard from '@/components/ContributorCard';
+import ContributorCard from "@/components/ContributorCard";
 
 async function getContributorData() {
   // fetch contributors using Github REST API
-  const res = await fetch('https://api.github.com/repos/WebXDAO/WebXDAO.github.io/contributors?anon=1');
+  const res = await fetch(
+    "https://api.github.com/repos/WebXDAO/WebXDAO.github.io/contributors?anon=1"
+  );
 
   // handle errors
-  if (!res.ok)
-    throw new Error('Failed to fetch Contributor\'s data from Github!');
+  if (!res.ok) throw new Error("Failed to fetch Contributor's data from Github!");
 
   // returns a promise
   return res.json();
 }
 
-export default async function ContributorsPage() {
+interface Card {
+  id: number;
+  login: string;
+  html_url: string;
+  contributions: number;
+  avatar_url: string;
+}
 
+export default async function ContributorsPage() {
   const contributorList = await getContributorData();
 
   return (
     <>
-      <section className="container mt-10 flex flex-wrap p-8">
-        {contributorList.map(({ id, login, html_url, contributions }: { id: number, login: string, html_url: string, contributions: number }) => {
+      <section className="container mt-10 flex flex-wrap justify-center gap-8 p-8">
+        {contributorList.map((data: Card) => {
           return (
             <ContributorCard
-              key={id}
-              username={login}
-              commits={contributions}
-              profileLink={html_url}
+              key={data.id}
+              data={data}
             />
-          )
+          );
         })}
       </section>
     </>
   );
-}
+}
diff --git a/src/components/ContributorCard.tsx b/src/components/ContributorCard.tsx
@@ -1,50 +1,53 @@
 import { fontGilroy } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
 
-export default function ContributorCard({
-  username,
-  commits,
-  profileLink,
-}: {
-  username: string;
-  commits: number;
-  profileLink: string;
-}) {
+
+import Image from "next/image";
+
+
+import Link from "next/link";
+
+
+import { FaGithub } from "react-icons/fa";
+
+
+import { Icons } from "./icons";
+
+
+
+interface Card {
+  id: number;
+  login: string;
+  html_url: string;
+  contributions: number;
+  avatar_url: string;
+}
+
+export default function ContributorCard({data}: {data: Card}) {
   return (
-    <>
-      <a
+    <div className="flex h-80 w-72 flex-col items-center justify-between rounded-lg border border-black p-4 dark:border-white">
+      <div
         className={cn(
-          "m-2 flex cursor-pointer space-x-4 whitespace-nowrap rounded-xl border border-black p-2 align-middle text-xl font-semibold leading-[31px] transition-all hover:shadow-lg active:shadow-sm active:ring-2 active:ring-[#411AFF] dark:border-[#3d60ba] dark:font-medium dark:shadow-[#1f2840]",
+          "container flex w-fit items-center space-x-4 whitespace-nowrap rounded-xl border border-black p-2 align-middle text-lg font-semibold leading-[31px] transition-all hover:shadow-lg active:shadow-sm active:ring-2 active:ring-[#411AFF] dark:border-[#3d60ba] dark:font-medium dark:shadow-[#1f2840]",
           fontGilroy.className
         )}
-        href={profileLink}
-        target="_blank"
       >
-        <div>{username.toUpperCase()}</div>
-        <div className="text-[#411AFF] dark:text-[#6b4ef8]"> {commits}</div>
-        <div className="ml-1 hidden align-middle dark:inline-block">
-          <svg
-            width="31"
-            height="28"
-            viewBox="0 0 31 28"
-            fill="white"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M15.6814 24.8718C15.4323 25.1209 14.9894 25.1624 14.6988 24.8718C14.5691 24.7411 14.4963 24.5645 14.4963 24.3804C14.4963 24.1964 14.5691 24.0198 14.6988 23.8891L19.3908 19.1971L17.4392 17.2455L12.7472 21.9375C12.4842 22.2144 12.0413 22.2005 11.7645 21.9375C11.6349 21.8069 11.5621 21.6303 11.5621 21.4462C11.5621 21.2621 11.6349 21.0855 11.7645 20.9549L16.4565 16.2628L14.505 14.3113L9.81297 19.0033C9.56383 19.2524 9.12093 19.294 8.83027 19.0033C8.70355 18.8711 8.63281 18.6951 8.63281 18.512C8.63281 18.3288 8.70355 18.1528 8.83027 18.0206L13.5223 13.3286L11.5569 11.3771L6.86489 16.0691C6.61575 16.3182 6.17285 16.3597 5.88219 16.0691C5.75547 15.9369 5.68472 15.7608 5.68472 15.5777C5.68472 15.3946 5.75547 15.2186 5.88219 15.0864L11.9444 9.02412L14.5327 11.5985C15.8475 12.9134 18.1174 12.8995 19.4323 11.5985C20.7887 10.2421 20.7887 8.05527 19.4323 6.69887L16.8579 4.12449L17.2455 3.73695C18.325 2.65737 20.0828 2.65737 21.1624 3.73695L27.0309 9.60543C28.1105 10.685 28.1105 12.4428 27.0309 13.5224L15.6814 24.8718ZM28.9824 15.4878C30.0193 14.4479 30.6016 13.0393 30.6016 11.5708C30.6016 10.1023 30.0193 8.69376 28.9824 7.65389L23.1139 1.7854C22.0741 0.748523 20.6655 0.16626 19.197 0.16626C17.7285 0.16626 16.3199 0.748523 15.2801 1.7854L14.8925 2.17295L14.505 1.7854C13.4651 0.748523 12.0565 0.16626 10.588 0.16626C9.11956 0.16626 7.71099 0.748523 6.67111 1.7854L1.77149 6.68503C0.835158 7.61816 0.264409 8.85606 0.162829 10.1741C0.0612495 11.4921 0.435571 12.8028 1.21786 13.8684L3.22477 11.8615C2.95721 11.3391 2.86263 10.7451 2.95468 10.1655C3.04673 9.58581 3.32065 9.0504 3.73687 8.63658L8.6365 3.73695C9.71608 2.65737 11.4739 2.65737 12.5534 3.73695L17.4807 8.66426C17.7299 8.9134 17.7714 9.3563 17.4807 9.64696C17.1901 9.93761 16.7472 9.89609 16.4981 9.64696L11.9444 5.10719L3.9168 13.121C2.56041 14.4635 2.56041 16.6642 3.9168 18.0206C4.45659 18.5604 5.14863 18.8926 5.88219 18.9895C5.97911 19.7337 6.31943 20.425 6.85015 20.9558C7.38086 21.4865 8.07218 21.8268 8.81643 21.9237C8.91335 22.668 9.25367 23.3593 9.78439 23.89C10.3151 24.4207 11.0064 24.761 11.7507 24.858C11.8476 25.6054 12.1797 26.2835 12.7195 26.8233C13.37 27.4739 14.242 27.8337 15.1693 27.8337C16.0967 27.8337 16.9686 27.4739 17.6192 26.8233L28.9824 15.4878Z" />
-          </svg>
-        </div>
-        <div className="ml-1 inline-block align-middle dark:hidden">
-          <svg
-            width="31"
-            height="28"
-            viewBox="0 0 31 28"
-            fill="black"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M15.6814 24.8718C15.4323 25.1209 14.9894 25.1624 14.6988 24.8718C14.5691 24.7411 14.4963 24.5645 14.4963 24.3804C14.4963 24.1964 14.5691 24.0198 14.6988 23.8891L19.3908 19.1971L17.4392 17.2455L12.7472 21.9375C12.4842 22.2144 12.0413 22.2005 11.7645 21.9375C11.6349 21.8069 11.5621 21.6303 11.5621 21.4462C11.5621 21.2621 11.6349 21.0855 11.7645 20.9549L16.4565 16.2628L14.505 14.3113L9.81297 19.0033C9.56383 19.2524 9.12093 19.294 8.83027 19.0033C8.70355 18.8711 8.63281 18.6951 8.63281 18.512C8.63281 18.3288 8.70355 18.1528 8.83027 18.0206L13.5223 13.3286L11.5569 11.3771L6.86489 16.0691C6.61575 16.3182 6.17285 16.3597 5.88219 16.0691C5.75547 15.9369 5.68472 15.7608 5.68472 15.5777C5.68472 15.3946 5.75547 15.2186 5.88219 15.0864L11.9444 9.02412L14.5327 11.5985C15.8475 12.9134 18.1174 12.8995 19.4323 11.5985C20.7887 10.2421 20.7887 8.05527 19.4323 6.69887L16.8579 4.12449L17.2455 3.73695C18.325 2.65737 20.0828 2.65737 21.1624 3.73695L27.0309 9.60543C28.1105 10.685 28.1105 12.4428 27.0309 13.5224L15.6814 24.8718ZM28.9824 15.4878C30.0193 14.4479 30.6016 13.0393 30.6016 11.5708C30.6016 10.1023 30.0193 8.69376 28.9824 7.65389L23.1139 1.7854C22.0741 0.748523 20.6655 0.16626 19.197 0.16626C17.7285 0.16626 16.3199 0.748523 15.2801 1.7854L14.8925 2.17295L14.505 1.7854C13.4651 0.748523 12.0565 0.16626 10.588 0.16626C9.11956 0.16626 7.71099 0.748523 6.67111 1.7854L1.77149 6.68503C0.835158 7.61816 0.264409 8.85606 0.162829 10.1741C0.0612495 11.4921 0.435571 12.8028 1.21786 13.8684L3.22477 11.8615C2.95721 11.3391 2.86263 10.7451 2.95468 10.1655C3.04673 9.58581 3.32065 9.0504 3.73687 8.63658L8.6365 3.73695C9.71608 2.65737 11.4739 2.65737 12.5534 3.73695L17.4807 8.66426C17.7299 8.9134 17.7714 9.3563 17.4807 9.64696C17.1901 9.93761 16.7472 9.89609 16.4981 9.64696L11.9444 5.10719L3.9168 13.121C2.56041 14.4635 2.56041 16.6642 3.9168 18.0206C4.45659 18.5604 5.14863 18.8926 5.88219 18.9895C5.97911 19.7337 6.31943 20.425 6.85015 20.9558C7.38086 21.4865 8.07218 21.8268 8.81643 21.9237C8.91335 22.668 9.25367 23.3593 9.78439 23.89C10.3151 24.4207 11.0064 24.761 11.7507 24.858C11.8476 25.6054 12.1797 26.2835 12.7195 26.8233C13.37 27.4739 14.242 27.8337 15.1693 27.8337C16.0967 27.8337 16.9686 27.4739 17.6192 26.8233L28.9824 15.4878Z" />
-          </svg>
-        </div>
-      </a>
-    </>
+        <div>{data.login.toUpperCase()}</div>
+        <div className="text-[#411AFF] dark:text-[#6b4ef8]"> {data.contributions}</div>
+        <Icons.handShake className="ml-1 inline-block align-middle" />
+      </div>
+      <Image
+        src={data.avatar_url}
+        alt={data.login}
+        width={120}
+        height={120}
+        className="rounded-full border"
+      />
+      <div className="text-2xl">
+        <Link href={data.html_url} target="_blank" className="duration-150 hover:text-[#411AFF]">
+          <FaGithub />
+        </Link>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -1,17 +1,17 @@
 import {
+  ArrowUpRight,
+  Linkedin,
   LucideProps,
   Moon,
+  Rocket,
   SunMedium,
   Twitter,
-  Linkedin,
   Users,
   Zap,
-  Rocket,
-  ArrowUpRight,
   type Icon as LucideIcon,
-} from "lucide-react"
+} from "lucide-react";
 
-export type Icon = LucideIcon
+export type Icon = LucideIcon;
 
 export const Icons = {
   sun: SunMedium,
@@ -114,4 +114,9 @@ export const Icons = {
       />
     </svg>
   ),
+  handShake: (props: LucideProps) => (
+    <svg width="28" height="24" viewBox="0 0 31 28" fill="var(--svg)" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.6814 24.8718C15.4323 25.1209 14.9894 25.1624 14.6988 24.8718C14.5691 24.7411 14.4963 24.5645 14.4963 24.3804C14.4963 24.1964 14.5691 24.0198 14.6988 23.8891L19.3908 19.1971L17.4392 17.2455L12.7472 21.9375C12.4842 22.2144 12.0413 22.2005 11.7645 21.9375C11.6349 21.8069 11.5621 21.6303 11.5621 21.4462C11.5621 21.2621 11.6349 21.0855 11.7645 20.9549L16.4565 16.2628L14.505 14.3113L9.81297 19.0033C9.56383 19.2524 9.12093 19.294 8.83027 19.0033C8.70355 18.8711 8.63281 18.6951 8.63281 18.512C8.63281 18.3288 8.70355 18.1528 8.83027 18.0206L13.5223 13.3286L11.5569 11.3771L6.86489 16.0691C6.61575 16.3182 6.17285 16.3597 5.88219 16.0691C5.75547 15.9369 5.68472 15.7608 5.68472 15.5777C5.68472 15.3946 5.75547 15.2186 5.88219 15.0864L11.9444 9.02412L14.5327 11.5985C15.8475 12.9134 18.1174 12.8995 19.4323 11.5985C20.7887 10.2421 20.7887 8.05527 19.4323 6.69887L16.8579 4.12449L17.2455 3.73695C18.325 2.65737 20.0828 2.65737 21.1624 3.73695L27.0309 9.60543C28.1105 10.685 28.1105 12.4428 27.0309 13.5224L15.6814 24.8718ZM28.9824 15.4878C30.0193 14.4479 30.6016 13.0393 30.6016 11.5708C30.6016 10.1023 30.0193 8.69376 28.9824 7.65389L23.1139 1.7854C22.0741 0.748523 20.6655 0.16626 19.197 0.16626C17.7285 0.16626 16.3199 0.748523 15.2801 1.7854L14.8925 2.17295L14.505 1.7854C13.4651 0.748523 12.0565 0.16626 10.588 0.16626C9.11956 0.16626 7.71099 0.748523 6.67111 1.7854L1.77149 6.68503C0.835158 7.61816 0.264409 8.85606 0.162829 10.1741C0.0612495 11.4921 0.435571 12.8028 1.21786 13.8684L3.22477 11.8615C2.95721 11.3391 2.86263 10.7451 2.95468 10.1655C3.04673 9.58581 3.32065 9.0504 3.73687 8.63658L8.6365 3.73695C9.71608 2.65737 11.4739 2.65737 12.5534 3.73695L17.4807 8.66426C17.7299 8.9134 17.7714 9.3563 17.4807 9.64696C17.1901 9.93761 16.7472 9.89609 16.4981 9.64696L11.9444 5.10719L3.9168 13.121C2.56041 14.4635 2.56041 16.6642 3.9168 18.0206C4.45659 18.5604 5.14863 18.8926 5.88219 18.9895C5.97911 19.7337 6.31943 20.425 6.85015 20.9558C7.38086 21.4865 8.07218 21.8268 8.81643 21.9237C8.91335 22.668 9.25367 23.3593 9.78439 23.89C10.3151 24.4207 11.0064 24.761 11.7507 24.858C11.8476 25.6054 12.1797 26.2835 12.7195 26.8233C13.37 27.4739 14.242 27.8337 15.1693 27.8337C16.0967 27.8337 16.9686 27.4739 17.6192 26.8233L28.9824 15.4878Z" />
+    </svg>
+  ),
 };
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -4,6 +4,8 @@
 
 @layer base {
   .light {
+    --svg: #000 !important;
+
     --background: 0 0% 100% !important;
     --foreground: 222.2 47.4% 11.2% !important;
 
@@ -37,6 +39,8 @@
   }
 
   .dark {
+    --svg: #fff !important;
+
     --background: 224 71% 4% !important;
     --foreground: 213 31% 91% !important;
 
@@ -71,6 +75,8 @@
 
   @media (prefers-color-scheme: dark) {
     :root {
+      --svg: #fff;
+
       --background: 224 71% 4%;
       --foreground: 213 31% 91%;
 
@@ -105,6 +111,7 @@
 
     @media (prefers-color-scheme: light) {
       :root {
+        --svg: #000; 
         --background: 0 0% 100%;
         --foreground: 222.2 47.4% 11.2%;