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>