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>
2024-10-12 17:17:36 +00:00
parent 3ec2510a0b
commit 1801749c8f
4 changed files with 93 additions and 0 deletions
@@ -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>
+  );
+};