Add links to icons

src/components/ItemCard.tsx

@@ -4,17 +4,18 @@ import {classNames, isHoverable} from "../utils/helpers";
 import DependentImage from "./DependentImage";
 import ReactMarkdown from 'react-markdown'
 
-import {AiFillGithub, AiFillLinkedin, AiOutlineLink,} from "react-icons/ai";
-import {RxOpenInNewWindow} from "react-icons/rx";
+import Link from "next/link";
+import {LinkIcon, LinkIcons} from "../pages";
 
 type ItemCardProps = {
     banner: string;
     bannerBlur: string;
     title: string;
     description: string;
+    links?: LinkIcon[];
 }
 
-const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
+const ItemCard = ({banner, bannerBlur, title, description, links}: ItemCardProps) => {
     const itemRef = useRef<HTMLDivElement>(null);
     const [active, toggleActive, setActive] = useToggle()
 
@@ -34,20 +35,20 @@ const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
         />
         <div className="elements grid grid-cols-12 h-full m-2 px-1 sm:px-4">
             <div className="col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
-                <div className="text-2xl sm:text-2xl md:text-3xl">{title}</div>
+                <div className="text-2xl sm:text-2xl md:text-3xl font-semibold">{title}</div>
                 <div className="mt-0 md:mt-1.5 text-xl sm:text-lg md:text-xl overflow-hidden ">
                     <ReactMarkdown>{description}</ReactMarkdown>
                 </div>
             </div>
-            <div className="col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
-                <div
-                    className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
-                    <RxOpenInNewWindow/>
-                    {/*<AiOutlineLink/>*/}
-                    <AiFillGithub/>
-                    {/*<AiFillLinkedin/>*/}
-                </div>
+            { (links?.length ?? 0) > 0 ? <div className="col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
+                <div className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
+                    {links!.map(({icon, location}) => {
+                        return <Link href={location} >
+                            {LinkIcons[icon]({})}
+                    </Link>
+                    })}
                 </div>
+            </div> : null}
         </div>
     </div>
 }

src/pages/index.tsx

@@ -4,12 +4,29 @@ import React, {useEffect} from "react";
 import ItemCard from "../components/ItemCard";
 import {getPlaiceholder} from "plaiceholder";
 import {useBreakpointValue} from "../utils/helpers";
+import {IconType} from "react-icons";
+import {AiFillGithub, AiOutlineLink} from "react-icons/ai";
+import {RxOpenInNewWindow} from "react-icons/rx";
 
-interface Project {
+export type Project = {
     title: string;
     banner: string;
     longDescription: string;
     shortDescription: string;
+    links?: LinkIcon[];
+}
+
+export type LinkIconType = "github" | "external" | "link";
+
+export const LinkIcons: Record<LinkIconType, IconType> = {
+    github: AiFillGithub,
+    external: RxOpenInNewWindow,
+    link: AiOutlineLink
+}
+
+export type LinkIcon = {
+    icon: LinkIconType;
+    location: string;
 }
 
 type ProjectWithBlur = Project & { bannerBlur: string };
@@ -20,31 +37,47 @@ type HomeStaticProps = {
 }
 
 export async function getStaticProps(context: GetStaticPropsContext) {
-    const projects = [
+    const projects: Project[] = [
         {
             title: "Phototag",
             banner: "/phototag.png",
             longDescription: `Using Google's Vision API and supporting metadata formats on Windows, Phototag makes it easy to quickly add rich, descriptive tags to your photos, saving you time and effort.`,
-            shortDescription: "Effortlessly add rich & descriptive tags to your photos with Phototag."
+            shortDescription: "Effortlessly add rich & descriptive tags to your photos with Phototag.",
+            links: [
+                {
+                    icon: "github",
+                    location: "https://github.com/Xevion/phototag"
+                },
+                {
+                    icon: "external",
+                    location: "https://github.com/Xevion/phototag"
+                }
+            ]
         },
         {
             title: "Paths",
             banner: "/paths.png",
             shortDescription: "Discover the power of graph traversal algorithms with my interactive application.",
             longDescription: `Discover the power of graph traversal algorithms with my interactive Unity application!
-             Easily generate and edit graphs, create mazes, and experiment with different algorithm configurations to find the most efficient path.`
+             Easily generate and edit graphs, create mazes, and experiment with different algorithm configurations to find the most efficient path.`,
+            links: [
+                {
+                    icon: "github",
+                    location: "https://github.com/Xevion/Paths"
                 }
-    ].map(async project => {
+            ]
+        }
+    ];
+
+    return {
+        props: {
+            projects: await Promise.all(projects.map(async project => {
                 const {base64} = await getPlaiceholder(project.banner, {size: 16});
                 return {
                     ...project,
                     bannerBlur: base64
                 };
-    })
-
-    return {
-        props: {
-            projects: await Promise.all(projects)
+            }))
         }
     }
 }

src/styles/globals.scss

@@ -53,7 +53,11 @@ html, body {
 .icon-grid {
   direction: rtl;
 
-  > svg {
+  > a > svg {
+    @apply w-full h-full;
+  }
+
+  > svg, a {
     width: 75%;
     height: 75%;
     @apply transition-transform drop-shadow-md hover:scale-[120%] opacity-80 hover:opacity-100 text-white m-auto aspect-square;