1 files changed, 45 insertions, 0 deletions
diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
new file mode 100644
index 0000000..86cf2ed
--- /dev/null
+++ b/src/lib/components/ServiceCard.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Link from "./Link.svelte";
+
+  const { service }: { service: App.ServiceItem } = $props();
+</script>
+
+<div
+  class="card bg-base-200 card-md md:card-lg shadow-md
+	border border-neutral my-1 md:mx-1"
+>
+  <div class="card-body">
+    <div class="card-title text-secondary">
+      <span class={service.icon}></span>
+      <h3>{service.name}</h3>
+    </div>
+    <div class="divider m-0 p-0"></div>
+    <p>{service.description}</p>
+    <div class="flex flex-row w-full h-full">
+      {#each service.references as reference}
+        <span class="mx-1"
+          ><Link href={reference.url}
+            >{reference.name}
+            <span class="iconify-[fa7-solid--arrow-up-right-from-square]"
+            ></span></Link
+          ></span
+        >
+      {/each}
+    </div>
+    <div class="divider m-0 p-0 invisible"></div>
+    <div class="card-actions justify-start">
+      <a
+        href={service.url}
+        target="_blank"
+        class="btn btn-outline btn-secondary"
+        >check <span class="iconify-[fa7-solid--chevron-right]"></span></a
+      >
+      <a
+        href={service.source}
+        target="_blank"
+        class="btn btn-ghost btn-secondary"
+        ><span class="iconify-[fa7-regular--file-code]"></span> source code</a
+      >
+    </div>
+  </div>
+</div>