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>

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

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

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { ConditionEnum, ConditionProductVariation } from '$lib'
+  import * as RadioGroup from '$lib/components/ui/radio-group'
+  import { Label } from '$lib/components/ui/label'
+  import * as Card from '../card'
+  import { cn } from '$lib/utils'
+  import Badge from '../badge/badge.svelte'
+  import { m } from '$lib/paraglide/messages'
+
+  const { variations }: { variations: ConditionProductVariation[] } = $props()
+
+  const titleMap: Record<ConditionEnum, () => string> = {
+    excellent: m.condition_variation_excellent,
+    very_good: m.condition_variation_very_good,
+    good: m.condition_variation_good,
+    fair: m.condition_variation_fair,
+  }
+
+  const descriptionMap: Record<ConditionEnum, () => string> = {
+    excellent: m.condition_variation_description_excellent,
+    very_good: m.condition_variation_description_very_good,
+    good: m.condition_variation_description_good,
+    fair: m.condition_variation_description_fair,
+  }
+
+  let selectedCondition = $state('')
+</script>
+
+<div class="mb-6">
+  <Label class="mb-3">{m.condition_title()}</Label>
+
+  <RadioGroup.Root bind:value={selectedCondition}>
+    {#each variations as variation, i (variation.name)}
+      <Card.Root
+        class={cn(
+          'flex flex-row p-4 items-center cursor-pointer transition-all border-2 shadow-none',
+          selectedCondition === variation.name
+            ? 'border-blue-600 dark:border-blue-500 bg-blue-50 dark:bg-blue-950'
+            : '',
+        )}
+        onclick={() => (selectedCondition = variation.name)}
+      >
+        <RadioGroup.Item value={variation.name} id={`r${i}`} />
+        <div>
+          <div class="flex flex-row gap-4">
+            <Label class="mb-1" for={`r${i}`}
+              >{titleMap[variation.name]()}</Label
+            >
+            <Badge variant="secondary">{variation.numericValue}%</Badge>
+          </div>
+          <div class="text-sm text-gray-600 dark:text-gray-400">
+            {descriptionMap[variation.name]()}
+          </div>
+        </div>
+      </Card.Root>
+    {/each}
+  </RadioGroup.Root>
+</div>

src/lib/components/ui/variations/color/ColorButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  export type ColorButtonInput = {
+    hex: string
+    name: string
+  }
+
+  const {
+    onclick,
+    hex,
+    name,
+    selected = $bindable(),
+  }: {
+    onclick: (input: ColorButtonInput) => void
+    hex: string
+    name: string
+    selected: boolean
+  } = $props()
+</script>
+
+<button
+  onclick={() => onclick({ hex, name })}
+  class:border-blue-600={selected}
+  class:dark:border-blue-500={selected}
+  class:ring-2={selected}
+  class:ring-blue-200={selected}
+  class:dark:ring-blue-900={selected}
+  class="cursor-pointer relative w-12 h-12 rounded-full border-2 transition-all border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500"
+  title={name}
+>
+  <div class="w-full h-full rounded-full" style:background-color={hex}></div>
+</button>