projects

components/ProjectCard.tsx

@@ -0,0 +1,37 @@
+import { LuLink } from "@preact-icons/lu";
+
+interface Project {
+  id: string;
+  name: string;
+  description: string;
+  link: string;
+}
+
+export default function ProjectCard(props: { project: Project }) {
+  const { project } = props;
+  return (
+    <div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
+      <div class="card-body p-6">
+        <h2 class="card-title text-xl md:text-2xl font-bold justify-center text-center break-words text-base-100">
+          {project.name}
+        </h2>
+
+        <p class="text-center break-words my-4 text-base-100">
+          {project.description}
+        </p>
+
+        <div class="card-actions justify-end mt-4 ">
+          <a
+            href={project.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="btn btn-circle btn-secondary text-accent"
+            aria-label={`Visit ${project.name}`}
+          >
+            <LuLink class="text-lg" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}