code dump frontend

frontend/islands/ProjectCard.tsx

@@ -0,0 +1,46 @@
+export const ProjectCard = function ProjectCard(props: ProjectProps) {
+  return (
+    <div
+      class={`group space-y-1 rounded-md ${
+        props.wip ? "border-2 border-dashed" : "cursor-pointer"
+      } bg-[#45475a] px-3 py-2 m-10 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
+      onClick={() => props.repo && open(props.repo, "_blank")}
+    >
+      <div class="flex items-center justify-between">
+        <h2 class="text-lg text-white font-black uppercase">
+          <a href={props.repo} target="_blank">
+            {props.title}
+          </a>
+        </h2>
+        <div class="bg-[#585b70] text-[#a6adc8] text-xs font-bold uppercase px-2.5 py-0.5 rounded-full">
+          {props.repo && (
+            <a
+              class="hover:underline"
+              href={props.repo}
+              target="_blank"
+              onClick={(e) => e.stopPropagation()}
+            >
+              Active
+            </a>
+          )}
+          {!props.repo && !props.wip && <span>Dead</span>}
+          {props.wip && <span>WIP</span>}
+        </div>
+      </div>
+      <p class="whitespace-pre-wrap italic font-light text-lg text-[#a6adc8]">
+        {props.summary}
+      </p>
+      <p class="whitespace-pre-wrap text-sm font-semibold text-[#a6adc8]">
+        {props.tech}
+      </p>
+    </div>
+  );
+};
+
+type ProjectProps = {
+  title: string;
+  repo?: string;
+  summary: string;
+  tech: string;
+  wip?: boolean;
+};