wip

src/lib/components/ui/variations/CapacityVarations.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { CapacityProductVariation } from '$lib'
+  import * as m from '$lib/paraglide/messages'
+  import { ToggleButton } from '../button'
+  import { Label } from '../label'
+
+  const { variations }: { variations: CapacityProductVariation[] } = $props()
+
+  let selectedVariation = $state('')
+</script>
+
+<div class="mb-6">
+  <Label class="mb-3">{m['capacity_variation.title']()}</Label>
+  <div class="flex flex-row gap-2">
+    {#each variations as variation (variation.numericValue)}
+      <ToggleButton
+        onclick={() => (selectedVariation = variation.name)}
+        selected={selectedVariation === variation.name}
+      >
+        {variation.name}
+      </ToggleButton>
+    {/each}
+  </div>
+</div>