feat(contacts): ContactCard + ContactsBlock-Komponente, BlockRenderer registriert

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-04 08:49:23 +02:00
parent 1827d9772a
commit 7bd62b75b0
4 changed files with 78 additions and 0 deletions
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+  import type { ContactEntry } from "$lib/block-types";
+
+  let { contact }: { contact: ContactEntry } = $props();
+</script>
+
+<div class="flex flex-col gap-1.5 rounded-lg border border-stein-200 bg-white px-4 py-3">
+  <div>
+    <span class="text-sm font-semibold text-stein-900">{contact.name ?? ""}</span>
+    {#if contact.role}
+      <span class="ml-1.5 text-xs text-stein-500">{contact.role}</span>
+    {/if}
+  </div>
+  {#if contact.phone}
+    <a href="tel:{contact.phone.replace(/\s/g, '')}" class="inline-flex items-center gap-1.5 text-xs text-stein-700 no-underline hover:text-wald-700">
+      <Icon icon="mdi:phone-outline" class="size-3.5 shrink-0 text-stein-400" />
+      {contact.phone}
+    </a>
+  {/if}
+  {#if contact.email}
+    <a href="mailto:{contact.email}" class="inline-flex items-center gap-1.5 text-xs text-stein-700 no-underline hover:text-wald-700">
+      <Icon icon="mdi:email-outline" class="size-3.5 shrink-0 text-stein-400" />
+      {contact.email}
+    </a>
+  {/if}
+  {#if contact.note}
+    <p class="text-[11px] text-stein-400">{contact.note}</p>
+  {/if}
+</div>