feat: add polycule view

src/app/polycule/page.tsx

@@ -0,0 +1,33 @@
+import { Partner } from "@/components/partner";
+import { Rule } from "@/components/rule";
+import { Partners } from "@/config/Partners";
+
+const Polycule = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-[95%] text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+        <h1 className="text-5xl">Naomi&apos;s Polycule</h1>
+        <section>
+          <p className="mb-2">
+            Meet the people who love and support Naomi to the ends of the earth.
+          </p>
+          <Rule />
+          <div className="w-full">
+            {Partners.map((member) => (
+              <Partner
+                key={member.name}
+                name={member.name}
+                url={member.url}
+                avatar={member.avatar}
+                anniversary={member.anniversary}
+                relationship={member.relationship}
+              />
+            ))}
+          </div>
+        </section>
+      </main>
+    </>
+  );
+};
+
+export default Polycule;

src/components/partner.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { useState } from "react";
+
+interface PartnerProps {
+  name: string;
+  avatar: string;
+  relationship: string;
+  url: string;
+  anniversary: Date;
+}
+
+export const Partner = (props: PartnerProps): JSX.Element => {
+  const { name, avatar, relationship, url, anniversary } = props;
+
+  return (
+    <div className="flex items-start gap-2.5 pb-10 w-full">
+      <Image
+        className="rounded-full"
+        src={`https://cdn.nhcarrigan.com/avatars/${avatar}`}
+        alt={`${name}'s avatar.`}
+        width={75}
+        height={75}
+      />
+      <div className="flex flex-col w-full leading-1.5 p-4 border-gray-200 bg-gray-100 rounded-e-xl rounded-es-xl dark:bg-gray-700">
+        <div>
+          <a
+            className="text-sm font-semibold text-[#abfcec]"
+            href={url}
+            target="noopener noreferrer"
+          >
+            {name}
+          </a>
+          <p className="text-sm font-normal text-gray-500 dark:text-gray-400">
+            {anniversary.toLocaleDateString("en-GB", {
+              month: "long",
+              year: "numeric",
+              day: "numeric",
+            })}
+          </p>
+        </div>
+        <p className="text-sm font-normal py-2.5 text-gray-900 dark:text-white">
+          {relationship}
+        </p>
+      </div>
+    </div>
+  );
+};

src/config/NavItems.ts

@@ -6,5 +6,6 @@ export const NavItems = [
   { href: "/certs", text: "Certifications" },
   { href: "/reviews", text: "Reviews" },
   { href: "/games", text: "Games"},
-  { href: "/team", text: "Our Team" }
+  { href: "/team", text: "Our Team" },
+  { href: "/polycule", text: "Polycule"}
   ].sort((a, b) => a.text.localeCompare(b.text));

src/config/Partners.ts

@@ -0,0 +1,29 @@
+export const Partners: {
+  name: string;
+  avatar: string;
+  relationship: string;
+  url: string;
+  anniversary: Date;
+  }[] = [
+    {
+      name: "Sadashi",
+      avatar: "dashi.png",
+      relationship: "Romantic Partner",
+      url: "https://chat.nhcarrigan.com",
+      anniversary: new Date("January 1, 2023")
+    },
+    {
+      name: "Rain",
+      avatar: "estel.png",
+      relationship: "Fiancée",
+      url: "https://chat.nhcarrigan.com",
+      anniversary: new Date("November 17, 2023")
+    },
+    {
+      name: "Kaitlyn",
+      avatar: "fruit.png",
+      relationship: "Queer-Platonic Partner",
+      url: "https://kaitlyn.nhcarrigan.com",
+      anniversary: new Date("October 1, 2023")
+    },
+    ].sort((a, b) => a.anniversary.getTime() - b.anniversary.getTime())