wip

src/lib/components/ui/specCard/SpecCard.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Specification } from '$lib'
+  import * as Card from '../card'
+  import { m } from '$lib/paraglide/messages'
+  import * as Tabs from '../tabs'
+  import SpecTable from './SpecTable.svelte'
+
+  const { specifications }: { specifications: Specification[] } = $props()
+
+  let selectedSpec = $state(specifications.at(0)?.title ?? '')
+</script>
+
+<Card.Root>
+  <Card.Header>
+    {m.specification_title()}
+  </Card.Header>
+  <Card.Content>
+    <Tabs.Root bind:value={selectedSpec}>
+      <Tabs.List class="w-full">
+        {#each specifications as spec (spec.title)}
+          <Tabs.Trigger value={spec.title}>{spec.title}</Tabs.Trigger>
+        {/each}
+      </Tabs.List>
+      {#each specifications as spec (spec.title)}
+        <Tabs.TabsContent value={spec.title}>
+          <SpecTable attributes={spec.attributes} />
+        </Tabs.TabsContent>
+      {/each}
+    </Tabs.Root>
+  </Card.Content>
+</Card.Root>

src/lib/components/ui/specCard/SpecRow.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { SpecificationAttribute } from '$lib'
+
+  const { attribute }: { attribute: SpecificationAttribute } = $props()
+</script>
+
+<div
+  class="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700"
+>
+  <dt class="text-gray-600 dark:text-gray-400">{attribute.key}</dt>
+  <dd class="dark:text-gray-200">{attribute.value}</dd>
+</div>

src/lib/components/ui/specCard/SpecTable.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { SpecificationAttribute } from '$lib'
+  import type { Snippet } from 'svelte'
+  import SpecRow from './SpecRow.svelte'
+
+  const { attributes }: { attributes: SpecificationAttribute[] } = $props()
+</script>
+
+<dl class="space-y-3">
+  {#each attributes as attribute (attribute.key)}
+    <SpecRow {attribute} />
+  {/each}
+</dl>

src/lib/components/ui/specCard/index.ts

@@ -0,0 +1,3 @@
+import SpecCard from './SpecCard.svelte'
+
+export { SpecCard }