Change image and link name from nextjs, Add if exists github link on projects and project detail pages

app/projects/[id]/page.tsx

@@ -32,8 +32,7 @@ export default function ProjectDetailPage() {
     (project) => String(project.id) === router.split("/").slice(1)[1]
   )[0]
 
-  const twitterLink = findProject.links.twitter
-  const websiteLink = findProject.links.website
+  const { github, discord, twitter, website } = findProject.links
 
   return (
     <section className="flex flex-col items-center">
@@ -44,17 +43,19 @@ export default function ProjectDetailPage() {
             {findProject.name}
           </h1>
           <div className="flex flex-wrap items-center justify-start gap-5">
-            <Link
-              href={findProject.links.github}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div className="flex items-center gap-2">
-                <Image src={GithubVector} alt="bg" width={20} height={20} />
-                <p>Github</p>
-              </div>
-            </Link>
-            {websiteLink && (
+            {github && (
+              <Link
+                href={findProject.links.github}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <div className="flex items-center gap-2">
+                  <Image src={GithubVector} alt="bg" width={20} height={20} />
+                  <p>Github</p>
+                </div>
+              </Link>
+            )}
+            {website && (
               <Link
                 href={findProject.links.website}
                 target="_blank"
@@ -66,7 +67,7 @@ export default function ProjectDetailPage() {
                 </div>
               </Link>
             )}
-            {twitterLink && (
+            {twitter && (
               <Link
                 href={findProject.links.twitter}
                 target="_blank"

app/projects/page.tsx

@@ -29,53 +29,55 @@ export default function ProjectsPage() {
           <p className="text-base text-slate-900/70 md:text-lg">{`Showing ${projects.length} projects`}</p>
           <div className="flex flex-wrap justify-center gap-6 py-6">
             {projects.map((project, index) => {
+              const { id, image, links, name, tldr } = project
+              const { github, website } = links
               return (
                 <div
                   key={index}
-                  onClick={() => router.push(`/projects/${project.id}`)}
+                  onClick={() => router.push(`/projects/${id}`)}
                   className="flex h-[419px] w-[310px] cursor-pointer flex-col overflow-hidden rounded-lg border border-slate-900/20 transition ease-in-out hover:scale-105"
                 >
                   {project.image.length > 0 ? (
                     <Image
-                      src={require(`@/public/project-banners/${project.image}`)}
-                      alt={project.name}
+                      src={require(`@/public/project-banners/${image}`)}
+                      alt={name}
                       className="h-[163px] w-full rounded-t-lg object-cover"
                     />
                   ) : (
                     <Image
                       src={require(`@/public/project-banners/fallback.webp`)}
-                      alt={project.name}
+                      alt={name}
                       className="h-[163px] w-full rounded-t-lg object-cover"
                     />
                   )}
                   <div className="flex h-full flex-col justify-between gap-5 rounded-b-lg bg-white p-5">
                     <div className="flex flex-col justify-start gap-2">
-                      <h1 className="text-xl font-bold text-black">
-                        {project.name}
-                      </h1>
-                      <p className="text-slate-900/80">{project.tldr}</p>
+                      <h1 className="text-xl font-bold text-black">{name}</h1>
+                      <p className="text-slate-900/80">{tldr}</p>
                     </div>
                     <div
                       className="mr-auto flex items-center justify-start gap-2"
                       onClick={(e) => e.stopPropagation()}
                     >
-                      <Link
-                        href={`${project.links.github}`}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="hover:opacity-60"
-                      >
-                        <Image
-                          src={GithubIcon}
-                          alt="githubVector"
-                          className="cursor-pointer"
-                          width={18}
-                          height={18}
-                        />
-                      </Link>
-                      {project.links.website && (
+                      {github && (
                         <Link
-                          href={`${project.links.website}`}
+                          href={`${github}`}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="hover:opacity-60"
+                        >
+                          <Image
+                            src={GithubIcon}
+                            alt="githubVector"
+                            className="cursor-pointer"
+                            width={18}
+                            height={18}
+                          />
+                        </Link>
+                      )}
+                      {website && (
+                        <Link
+                          href={`${website}`}
                           target="_blank"
                           rel="noreferrer"
                           className="hover:opacity-60"

components/site-footer.tsx

@@ -1,5 +1,5 @@
-import NextImage from "next/image"
-import NextLink from "next/link"
+import Image from "next/image"
+import Link from "next/link"
 import PSELogo from "@/public/logos/footer-logo.svg"
 
 import { siteConfig } from "@/config/site"
@@ -16,23 +16,20 @@ export function SiteFooter() {
   return (
     <footer className="flex flex-col gap-5">
       <div className="flex w-full flex-col gap-5 p-[32px]">
-        <NextImage src={PSELogo} alt="logo" width={94} height={41} />
+        <Image src={PSELogo} alt="logo" width={94} height={41} />
         <h1 className="text-sm">
           Privacy + Scaling Explorations is a multidisciplinary team supported
           by the Ethereum Foundation.
         </h1>
       </div>
       <div className="flex w-full flex-col gap-5 px-[32px] text-base font-[500]">
-        <NextLink href={"/"} className="border-b-2 border-[#171C1B] py-5">
+        <Link href={"/"} className="border-b-2 border-[#171C1B] py-5">
           HOME
-        </NextLink>
-        <NextLink
-          href={"/projects"}
-          className="border-b-2 border-[#171C1B] py-5"
-        >
+        </Link>
+        <Link href={"/projects"} className="border-b-2 border-[#171C1B] py-5">
           PROJECT LIBRARY
-        </NextLink>
-        <NextLink
+        </Link>
+        <Link
           href={siteConfig.links.jobs}
           target="_blank"
           rel="noreferrer"
@@ -40,55 +37,51 @@ export function SiteFooter() {
         >
           JOBS
           <ArrowRightUp color="black" />
-        </NextLink>
+        </Link>
       </div>
       <div className="flex w-full flex-col items-center justify-center gap-5 bg-[#171C1B] py-[40px] text-sm">
         <div className="flex gap-5">
-          <NextLink
+          <Link
             href={siteConfig.links.twitter}
             target="_blank"
             rel="noreferrer"
           >
             <Twitter color="white" />
-          </NextLink>
+          </Link>
 
-          <NextLink
+          <Link
             href={siteConfig.links.discord}
             target="_blank"
             rel="noreferrer"
           >
             <Discord color="white" />
-          </NextLink>
-          <NextLink
-            href={siteConfig.links.github}
-            target="_blank"
-            rel="noreferrer"
-          >
+          </Link>
+          <Link href={siteConfig.links.github} target="_blank" rel="noreferrer">
             <Github color="white" />
-          </NextLink>
-          <NextLink
+          </Link>
+          <Link
             href={siteConfig.links.articles}
             target="_blank"
             rel="noreferrer"
           >
             <Mirror color="white" />
-          </NextLink>
+          </Link>
         </div>
         <div className="flex gap-5 text-white">
-          <NextLink
+          <Link
             href={siteConfig.links.privacyPolicy}
             target="_blank"
             rel="noreferrer"
           >
             <h1>Privacy Policy</h1>
-          </NextLink>
-          <NextLink
+          </Link>
+          <Link
             href={siteConfig.links.termOfUse}
             target="_blank"
             rel="noreferrer"
           >
             <h1>Terms of use</h1>
-          </NextLink>
+          </Link>
         </div>
         <h1 className="text-gray-400">Last updated June 8, 2023</h1>
       </div>