feat: add art component (#26)

Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/26
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

src/app/art/page.tsx

@@ -0,0 +1,24 @@
+import { ArtComponent } from "@/components/art";
+import { Rule } from "@/components/rule";
+import { Art } from "@/config/Art";
+
+const Arts = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-[95%] text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+        <h1 className="text-5xl">Art</h1>
+        <section>
+          <p className="mb-2">See various art depicting Naomi.</p>
+          <Rule />
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-y-5">
+            {Art.sort((a, b) => a.name.localeCompare(b.name)).map((art) => (
+              <ArtComponent key={art.name} name={art.name} img={art.img} artist={art.artist} url={art.url}/>
+            ))}
+          </div>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Arts;

src/components/art.tsx

@@ -0,0 +1,31 @@
+import Image from "next/image";
+
+interface ArtProps {
+  name: string;
+  img: string;
+  artist: string;
+  url: string;
+}
+
+export const ArtComponent = (props: ArtProps): JSX.Element => {
+  const { name, img, artist, url } = props;
+
+  return (
+    <div className="w-[300px] h-[300px] border-2 border-solid border-[--foreground] m-auto text-center items-center">
+      <p className="text-l">{name} by <a className="underline" href={url} target="_blank" rel="noreferrer">{artist}</a></p>
+      <a
+        href={`https://cdn.nhcarrigan.com/art/${img}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Image
+          src={`https://cdn.nhcarrigan.com/art/${img}`}
+          alt={name}
+          width={250}
+          height={250}
+          className="m-auto object-contain  max-h-[250px] max-w-[250px]"
+        />
+      </a>
+    </div>
+  );
+};

src/config/Art.ts

@@ -0,0 +1,37 @@
+export const Art: {
+    name: string;
+    img: string;
+    artist: string;
+    url: string;
+  }[] = [
+    {
+        name: "Avatar",
+        img: "profile.png",
+        artist: "Jazzybee",
+        url: "https://jazzybee.itch.io/sdvcharactercreator"
+    },
+    {
+        name: "AI Bot",
+        img: "ai-bot.png",
+        artist: "Picrew",
+        url: "https://picrew.me/en/image_maker/1382748"
+    },
+    {
+        name: "Mod Bot",
+        img: "mod-bot.png",
+        artist: "Picrew",
+        url: "https://picrew.me/en/image_maker/27700"
+    },
+    {
+        name: "Translation Bot",
+        img: "translation-bot.png",
+        artist: "Picrew",
+        url: "https://picrew.me/en/image_maker/3595"
+    },
+    {
+        name: "Task Bot",
+        img: "task-bot.png",
+        artist: "Picrew",
+        url: "https://picrew.me/en/image_maker/700620"
+    }
+  ]

src/config/NavItems.ts

@@ -9,5 +9,6 @@ export const NavItems = [
   { href: "/team", text: "Our Team" },
   { href: "/polycule", text: "Polycule"},
   { href: "/activity", text: "Activity"},
+  { href: "/art", text: "Art"},
   { href: "https://nhcarrigan.creator-spring.com/", text: "Merch"}
   ].sort((a, b) => a.text.localeCompare(b.text));