From 4f289e505114eb5ee5052fd0d31741f1d8ba4484 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Sat, 24 Dec 2022 12:21:20 -0600
Subject: [PATCH] Refactor into ItemCard component for upcoming mobile-focus
 click

---
 src/components/ItemCard.tsx | 31 +++++++++++++++++++++++++++++++
 src/pages/index.tsx         | 21 ++-------------------
 2 files changed, 33 insertions(+), 19 deletions(-)
 create mode 100644 src/components/ItemCard.tsx

diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
new file mode 100644
index 0000000..51518fc
--- /dev/null
+++ b/src/components/ItemCard.tsx
@@ -0,0 +1,31 @@
+import Image from "next/image";
+import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
+import React from "react";
+
+type ItemCardProps = {
+    banner: string;
+    title: React.ReactNode;
+    description: React.ReactNode;
+}
+
+const ItemCard = ({banner, title, description}: ItemCardProps) => {
+    return <div className="item">
+        <Image fill src={banner}
+               alt={`Banner for ${title}`}
+               style={{objectFit: "cover"}}
+        />
+        <div className="elements grid grid-cols-5 h-full">
+            <div className="col-span-4 md:col-span-3 z-30 drop-shadow-2xl p-0 md:p-3 pl-2 md:ml-4">
+                <div className="mt-1 text-xl md:mt-3 md:text-3xl">{title}</div>
+                <div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{description}</div>
+            </div>
+            <div className="hidden md:block"/>
+            <div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
+                <ArrowLongRightIcon
+                    className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>
+            </div>
+        </div>
+    </div>
+}
+
+export default ItemCard;
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b34b404..f7d9e65 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,7 @@
 import {type NextPage} from "next";
 import Head from "next/head";
-import Image from "next/image";
-import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
 import React from "react";
+import ItemCard from "../components/ItemCard";
 
 interface Project {
     title: string;
@@ -42,23 +41,7 @@ const Home: NextPage = () => {
                     <div className="flex h-full m-1 flex-col justify-start gap-y-4">
                         {
                             projects.map((project, index) =>
-                                <div key={index} className="item">
-                                    <Image fill src={project.banner}
-                                           alt={`Banner for ${project.title}`}
-                                           style={{objectFit: "cover"}}
-                                    />
-                                    <div className="elements grid grid-cols-5 h-full">
-                                        <div className="col-span-4 md:col-span-3 z-30 drop-shadow-2xl p-0 md:p-3 pl-2 md:ml-4">
-                                            <div className="mt-1 text-xl md:mt-3 md:text-3xl">{project.title}</div>
-                                            <div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{project.description}</div>
-                                        </div>
-                                        <div className="hidden md:block"/>
-                                        <div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
-                                            <ArrowLongRightIcon
-                                                className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>
-                                        </div>
-                                    </div>
-                                </div>
+                                <ItemCard key={index} {...project} />
                             )
                         }
                     </div>