feat: add polycule view

2024-08-24 21:29:13 -07:00
parent e12220441a
commit a137511c99
4 changed files with 111 additions and 1 deletions
@@ -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>
+  );
+};