34 lines
984 B
Svelte
34 lines
984 B
Svelte
<script lang="ts">
|
|
import type { Specification } from '$lib'
|
|
import * as Card from '../card'
|
|
import * as Tabs from '../tabs'
|
|
import SpecTable from './SpecTable.svelte'
|
|
import { T } from '@tolgee/svelte'
|
|
|
|
const { specifications }: { specifications: Specification[] } = $props()
|
|
|
|
let selectedSpec = $state(specifications.at(0)?.title ?? '')
|
|
</script>
|
|
|
|
<Card.Root>
|
|
<Card.Header>
|
|
<T keyName="specs.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}>
|
|
<T keyName={`specs.tabs.${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>
|