wip

2025-11-23 18:55:37 +01:00
parent c829f9f57b
commit 90280fd436
53 changed files with 1620 additions and 82 deletions
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
-	import '../app.css'
-	import favicon from '$lib/assets/favicon.svg'
+  import '../app.css'
+  import favicon from '$lib/assets/favicon.svg'
+  import * as r from '$lib/paraglide/runtime'

-	let { children } = $props()
+  r.setLocale('de-de')
+
+  let { children } = $props()
 </script>

 <svelte:head>
-	<link rel="icon" href={favicon} />
+  <link rel="icon" href={favicon} />
 </svelte:head>

-{@render children?.()}
+<div class="flex justify-center items-center">
+  <div class="max-w-full lg:max-w-5xl pt-4">
+    {@render children?.()}
+  </div>
+</div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,15 +1,199 @@
 <script lang="ts">
+  import * as Carousel from '$lib/components/ui/carousel'
+  import { Badge, type BadgeVariant } from '$lib/components/ui/badge'
+  import { Separator } from '$lib/components/ui/separator'
+  import ColorVariations from '$lib/components/ui/variations/ColorVariations.svelte'
+  import {
+    ConditionEnum,
+    type CapacityProductVariation,
+    type ColorProductVariation,
+    type ConditionProductVariation,
+    type Specification,
+  } from '$lib'
+  import CapacityVarations from '$lib/components/ui/variations/CapacityVarations.svelte'
+  import ConditionVariations from '$lib/components/ui/variations/ConditionVariations.svelte'
+  import { SpecCard } from '$lib/components/ui/specCard'
+
  async function crawlClevertronik() {
    const response = await fetch('/crawl', { method: 'POST' })
    const productName = await response.json()
    console.log(productName)
  }
+
+  type ProductBadge = {
+    text: string
+    variant: BadgeVariant
+  }
+
+  const product = {
+    title: 'Apple iPhone 15',
+    description:
+      'Das iPhone 15 bietet modernste Technologie zu einem nachhaltigen Preis. Professionell aufbereitet und vollständig getestet.',
+    images: [
+      'https://images.unsplash.com/photo-1702184117235-56002cb13663?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpUGhvbmUlMjAxNSUyMGJsYWNrfGVufDF8fHx8MTc2MzI5NDI5OHww&ixlib=rb-4.1.0&q=80&w=1080',
+      'https://images.unsplash.com/photo-1710023038502-ba80a70a9f53?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpUGhvbmUlMjAxNSUyMHByb3xlbnwxfHx8fDE3NjMzMjEyMTF8MA&ixlib=rb-4.1.0&q=80&w=1080',
+      'https://images.unsplash.com/photo-1761907174062-c8baf8b7edb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbWFydHBob25lJTIwbW9kZXJufGVufDF8fHx8MTc2MzM2OTEyOXww&ixlib=rb-4.1.0&q=80&w=1080',
+      'https://images.unsplash.com/photo-1567985944845-cb4d1e598822?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpUGhvbmUlMjBjYW1lcmF8ZW58MXx8fHwxNzYzMzkxOTUyfDA&ixlib=rb-4.1.0&q=80&w=1080',
+    ],
+    badges: [
+      {
+        text: 'Refurbished',
+        variant: 'default',
+      },
+      {
+        text: 'Nachhaltig',
+        variant: 'outline',
+      },
+    ] satisfies ProductBadge[],
+    specifications: [
+      {
+        title: 'display',
+        attributes: [
+          {
+            key: 'display_size',
+            value: '6,1 Zoll',
+          },
+          {
+            key: 'display_technology',
+            value: 'Super Retina XDR OLED',
+          },
+          {
+            key: 'display_resolution',
+            value: '2556 x 1179 Pixel (460 ppi)',
+          },
+        ],
+      },
+      {
+        title: 'battery',
+        attributes: [
+          {
+            key: 'battery_video',
+            value: '20',
+          },
+          {
+            key: 'battery_streaming',
+            value: '16',
+          },
+          {
+            key: 'battery_audio',
+            value: '80',
+          },
+          {
+            key: 'battery_quickcharge',
+            value: 'ja (50% in 30 Min mit 20W+)',
+          },
+        ],
+      },
+    ] satisfies Specification[],
+    variations: {
+      color: [
+        {
+          name: 'Blau',
+          type: 'color',
+          hex: '#87CEFA',
+          numericValue: null,
+        },
+        {
+          name: 'Grün',
+          type: 'color',
+          hex: '#ADFF2F',
+          numericValue: null,
+        },
+        {
+          name: 'Gelb',
+          type: 'color',
+          hex: '#FFFF00',
+          numericValue: null,
+        },
+        {
+          name: 'Rose',
+          type: 'color',
+          hex: '#FF69B4',
+          numericValue: null,
+        },
+        {
+          name: 'Schwarz',
+          type: 'color',
+          hex: '#000000',
+          numericValue: null,
+        },
+      ] satisfies ColorProductVariation[],
+      capacity: [
+        {
+          name: '128GB',
+          numericValue: 128,
+          hex: null,
+          type: 'capacity',
+        },
+        {
+          name: '256GB',
+          numericValue: 256,
+          hex: null,
+          type: 'capacity',
+        },
+        {
+          name: '512GB',
+          numericValue: 512,
+          hex: null,
+          type: 'capacity',
+        },
+      ] satisfies CapacityProductVariation[],
+      condition: [
+        {
+          name: ConditionEnum.EXCELLENT,
+          numericValue: 15,
+          hex: null,
+          type: 'condition',
+        },
+        {
+          name: ConditionEnum.VERY_GOOD,
+          numericValue: 25,
+          hex: null,
+          type: 'condition',
+        },
+        {
+          name: ConditionEnum.GOOD,
+          numericValue: 35,
+          hex: null,
+          type: 'condition',
+        },
+      ] satisfies ConditionProductVariation[],
+    },
+  }
 </script>

-<h1>Welcome to SvelteKit</h1>
-<p>
-  Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
-  documentation
-</p>
+<div>
+  <div class="flex lg:flex-row flex-col gap-6">
+    <Carousel.Root class="max-w-xs mx-12">
+      <Carousel.Previous />
+      <Carousel.Content>
+        {#each product.images as image}
+          <Carousel.Item>
+            <img class="p-1 rounded-lg" src={image} alt="" />
+          </Carousel.Item>
+        {/each}
+      </Carousel.Content>
+      <Carousel.Next />
+    </Carousel.Root>

-<button onclick={crawlClevertronik}>lets do it</button>
+    <div>
+      <div class="flex flex-col gap-y-1">
+        <div class="flex flex-row gap-2">
+          {#each product.badges as badgeInput (badgeInput.text)}
+            <Badge variant={badgeInput.variant}>{badgeInput.text}</Badge>
+          {/each}
+        </div>
+        <h1 class="text-xl">{product.title}</h1>
+        <h2 class="text-md">{product.description}</h2>
+      </div>
+      <Separator class="mt-4 mb-6" />
+      <div class="flex flex-col gap-4">
+        <ColorVariations variations={product.variations.color} />
+        <CapacityVarations variations={product.variations.capacity} />
+        <ConditionVariations variations={product.variations.condition} />
+      </div>
+      <SpecCard specifications={product.specifications} />
+    </div>
+  </div>
+  <button onclick={crawlClevertronik}>lets do it</button>
+</div>
--- a/src/routes/demo/paraglide/+page.svelte
+++ b/src/routes/demo/paraglide/+page.svelte
@@ -1,19 +1,17 @@
 <script lang="ts">
-	import { setLocale } from '$lib/paraglide/runtime'
-	import { page } from '$app/state'
-	import { goto } from '$app/navigation'
-	import { m } from '$lib/paraglide/messages.js'
+  import { setLocale } from '$lib/paraglide/runtime'
+  import { m } from '$lib/paraglide/messages.js'
 </script>

 <h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>
 <div>
-	<button onclick={() => setLocale('en')}>en</button>
-	<button onclick={() => setLocale('es')}>es</button>
-	<button onclick={() => setLocale('de-de')}>de-de</button>
+  <button onclick={() => setLocale('en')}>en</button>
+  <button onclick={() => setLocale('es')}>es</button>
+  <button onclick={() => setLocale('de-de')}>de-de</button>
 </div>
 <p>
-	If you use VSCode, install the <a
-		href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension"
-		target="_blank">Sherlock i18n extension</a
-	> for a better i18n experience.
+  If you use VSCode, install the <a
+    href="https://marketplace.visualstudio.com/items?itemName=inlang.vs-code-extension"
+    target="_blank">Sherlock i18n extension</a
+  > for a better i18n experience.
 </p>