feat: added product page

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { CapacityProductVariation } from '$lib'
-  import * as m from '$lib/paraglide/messages'
+  import { T } from '@tolgee/svelte'
   import { ToggleButton } from '../button'
   import { Label } from '../label'
 
@@ -10,7 +10,9 @@
 </script>
 
 <div class="mb-6">
-  <Label class="mb-3">{m['capacity_variation.title']()}</Label>
+  <Label class="mb-3">
+    <T keyName="capacity.title" />
+  </Label>
   <div class="flex flex-row gap-2">
     {#each variations as variation (variation.numericValue)}
       <ToggleButton

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ColorProductVariation } from '$lib'
-  import * as m from '$lib/paraglide/messages'
+  import { T } from '@tolgee/svelte'
   import { Label } from '../label'
   import ColorButton from './color/ColorButton.svelte'
 
@@ -10,7 +10,9 @@
 </script>
 
 <div class="mb-6">
-  <Label class="mb-3">{m['color_variation.title']()}</Label>
+  <Label class="mb-3">
+    <T keyName="color.title" />
+  </Label>
   <div class="flex flex-row gap-2">
     {#each variations as variation (variation.hex)}
       <ColorButton

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

@@ -1,33 +1,21 @@
 <script lang="ts">
-  import type { ConditionEnum, ConditionProductVariation } from '$lib'
+  import type { 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'
+  import { T } from '@tolgee/svelte'
 
   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>
+  <Label class="mb-3">
+    <T keyName="condition.title" />
+  </Label>
 
   <RadioGroup.Root bind:value={selectedCondition}>
     {#each variations as variation, i (variation.name)}
@@ -44,12 +32,12 @@
         <div>
           <div class="flex flex-row gap-4">
             <Label class="mb-1" for={`r${i}`}
-              >{titleMap[variation.name]()}</Label
+              ><T keyName={`condition.option.${variation.name}.title`} /></Label
             >
             <Badge variant="secondary">{variation.numericValue}%</Badge>
           </div>
           <div class="text-sm text-gray-600 dark:text-gray-400">
-            {descriptionMap[variation.name]()}
+            <T keyName={`condition.option.${variation.name}.description`} />
           </div>
         </div>
       </Card.Root>