Merge pull request #253 from FleetAdmiralJakob/improved-contributorpage

chore: improved code on contributor page
FleetAdmiralJakob · Jun 22, 2024 · af5dfbc · af5dfbc
2 parents 272fcc1 + 550be18
commit af5dfbc
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 62 deletions.
diff --git a/src/app/contributors/page.tsx b/src/app/contributors/page.tsx
@@ -2,56 +2,41 @@
 
 import Footer from "~/components/footer";
 import { IoIosArrowDropupCircle } from "react-icons/io";
-import JakobProfile from "/src/assets/jakob-profile.png";
-import FabiusProfile from "/src/assets/fabius-profile.png";
+import jakobProfile from "/src/assets/jakob-profile.png";
+import fabiusProfile from "/src/assets/fabius-profile.png";
 import { IoChevronBackSharp } from "react-icons/io5";
 import { FaLinkedin } from "react-icons/fa";
-import Image from "next/image";
+import Image, { type StaticImageData } from "next/image";
 import { cn } from "~/lib/utils";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { FaLink } from "react-icons/fa6";
 import { FaGithub } from "react-icons/fa";
 import { BsPeopleFill } from "react-icons/bs";
+import Link from "next/link";
 
 interface ContributorsProps {
   name: string;
   job: string;
-  image: JSX.Element;
+  image: StaticImageData;
   github?: string;
   website?: string;
   linkedin?: string;
 }
 
-const ContributorList: ContributorsProps[] = [
+const contributorList: ContributorsProps[] = [
   {
     name: "Fabius Schurig",
     job: "Engineer & Designer",
-    image: (
-      <Image
-        className="rounded-full"
-        alt={"Jakob"}
-        width={50}
-        height={50}
-        src={FabiusProfile}
-      />
-    ),
+    image: fabiusProfile,
     github: "https://github.com/Gamius00",
     website: "https://schurig.tech",
     linkedin: "https://www.linkedin.com/in/fabius-schurig-80713b284/",
   },
   {
     name: "Jakob Rössner",
     job: "Engineer",
-    image: (
-      <Image
-        className="rounded-full"
-        alt={"Jakob"}
-        width={50}
-        height={50}
-        src={JakobProfile}
-      />
-    ),
+    image: jakobProfile,
     github: "https://github.com/FleetAdmiralJakob",
     website: "https://roessner.tech",
     linkedin: "https://www.linkedin.com/in/jakobroessner/",
@@ -77,7 +62,7 @@ const Contributors = () => {
           </div>
         </div>
         <p className="mb-20 text-xl">Made with ❤️ by </p>
-        {ContributorList.map((contributor, id) => {
+        {contributorList.map((contributor, id) => {
           const [cardOpen, setCardOpen] = useState(false);
           return (
             <>
@@ -88,7 +73,13 @@ const Contributors = () => {
               >
                 <div className="flex lg:justify-between" key={id}>
                   <div className="flex flex-wrap items-start justify-start">
-                    <p className="order-0 lg:flex">{contributor.image}</p>
+                    <Image
+                      src={contributor.image}
+                      alt={contributor.name}
+                      width={50}
+                      height={50}
+                      className="order-0 rounded-full lg:flex"
+                    />
 
                     <div className="order-1 ml-4 mt-0.5 lg:flex lg:justify-between">
                       <p className="text-xl font-bold lg:mt-3">
@@ -120,41 +111,36 @@ const Contributors = () => {
                     },
                   )}
                 >
-                  <div
-                    className={cn("hidden", {
-                      flex: contributor.website,
-                    })}
-                    onClick={() => {
-                      if (contributor.website) {
-                        router.push(contributor.website);
-                      }
-                    }}
-                  >
-                    <p className={"hidden cursor-pointer lg:flex"}>Website</p>
-                    <FaLink className="ml-1 mt-1" />
-                  </div>
-                  <div
-                    className={cn("hidden", { flex: contributor.linkedin })}
-                    onClick={() => {
-                      if (contributor.linkedin) {
-                        router.push(contributor.linkedin);
-                      }
-                    }}
-                  >
-                    <p className={"hidden cursor-pointer lg:flex"}>LinkedIn</p>
-                    <FaLinkedin className="ml-1 mt-2.5 lg:mt-1" />
-                  </div>
-                  <div
-                    className={cn("hidden", { flex: contributor.github })}
-                    onClick={() => {
-                      if (contributor.github) {
-                        router.push(contributor.github);
-                      }
-                    }}
-                  >
-                    <p className={"hidden cursor-pointer lg:flex"}>GitHub</p>
-                    <FaGithub className="ml-1 mt-2.5 lg:mt-1" />
-                  </div>
+                  {contributor.website ? (
+                    <Link
+                      className={cn("hidden", {
+                        flex: contributor.website,
+                      })}
+                      href={contributor.website}
+                    >
+                      <p className={"hidden cursor-pointer lg:flex"}>Website</p>
+                      <FaLink className="ml-1 mt-1" />
+                    </Link>
+                  ) : null}
+
+                  {contributor.linkedin ? (
+                    <Link className="flex" href={contributor.linkedin}>
+                      <p className={"hidden cursor-pointer lg:flex"}>
+                        LinkedIn
+                      </p>
+                      <FaLinkedin className="ml-1 mt-2.5 lg:mt-1" />
+                    </Link>
+                  ) : null}
+
+                  {contributor.github ? (
+                    <Link
+                      className={cn("hidden", { flex: contributor.github })}
+                      href={contributor.github}
+                    >
+                      <p className={"hidden cursor-pointer lg:flex"}>GitHub</p>
+                      <FaGithub className="ml-1 mt-2.5 lg:mt-1" />
+                    </Link>
+                  ) : null}
                 </div>
               </div>
             </>

diff --git a/src/components/chat-overview.tsx b/src/components/chat-overview.tsx
@@ -89,9 +89,9 @@ const Chats: React.FC<{
                   className={cn("w-full border-t-2 border-secondary", {
                     "border-0": index == 0,
                   })}
+                  key={index}
                 >
                   <Link
-                    key={index}
                     className={cn(
                       "flex w-full items-center justify-between truncate px-5 py-6 lg:ml-5 lg:px-0",
                     )}
@@ -151,9 +151,9 @@ const Chats: React.FC<{
                 className={cn("w-full border-t-2 border-secondary", {
                   "border-0": index == 0,
                 })}
+                key={index}
               >
                 <Link
-                  key={index}
                   className={cn(
                     "flex w-full items-center justify-between truncate px-5 py-6 lg:ml-5 lg:border-0 lg:px-0",
                   )}