phoenix/src/routes/+page.svelte

<script lang="ts">
  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'
  import ImageCarousel from '$lib/components/ui/image-carousel/ImageCarousel.svelte'
  import type { ImageCarouselItem } from '$lib/components/ui/image-carousel'
  import { ShopList, type TShopListItem } from '$lib/components/ui/shopList'

  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: [
      {
        image:
          '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',
        alt: 'iphone',
      },

      {
        image:
          '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',
        alt: 'iphone',
      },
      {
        image:
          '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',
        alt: 'iphone',
      },
      {
        image:
          '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',
        alt: 'iphone',
      },
    ] satisfies ImageCarouselItem[],
    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[],
    },
    shops: [
      {
        name: 'Refurbed',
        badges: [
          {
            name: 'top_shop',
            variant: 'default',
          },
          {
            name: 'best_price',
            icon: 'TrendingDown',
            variant: 'default',
          },
        ],
        currency: '€',
        price: 585,
        rating: {
          score: 4.8,
          amount: 1247,
        },
        shipping: {
          shippingCost: 0,
          shippingTime: '1-2',
        },
        warrantyInMonths: 24,
        linkUrl: 'https://refurbed.com',
      },
      {
        name: 'GreenPhone',
        badges: [],
        currency: '€',
        price: 600,
        rating: {
          score: 4.6,
          amount: 856,
        },
        shipping: {
          shippingCost: 4.99,
          shippingTime: '2-3',
        },
        warrantyInMonths: 12,
        linkUrl: 'https://google.com',
      },
      {
        name: 'CleverTronik',
        badges: [
          {
            name: 'verified',
            variant: 'secondary',
          },
        ],
        currency: '€',
        price: 610,
        rating: {
          score: 4.7,
          amount: 2103,
        },
        shipping: {
          shippingCost: 0,
          shippingTime: '1-3',
        },
        warrantyInMonths: 18,
        linkUrl: 'https://clevertronik.de',
      },
      {
        name: 'Swappie',
        badges: [
          {
            name: 'goofie',
            variant: 'secondary',
          },
        ],
        currency: '€',
        price: 710,
        rating: {
          score: 4.5,
          amount: 634,
        },
        shipping: {
          shippingCost: 5.99,
          shippingTime: '3-5',
        },
        warrantyInMonths: 12,
        linkUrl: 'https://clevertronik.de',
      },
    ] satisfies TShopListItem[],
  }
</script>

<div class="grid gap-8">
  <div class="grid md:grid-cols-2 gap-8">
    <ImageCarousel buttonPosition="contained" items={product.images} preview />
    <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>
    </div>
  </div>
  <div class="flex gap-8 md:flex-row flex-col">
    <div class="md:basis-2/3"><ShopList items={product.shops} /></div>

    <div class="md:basis-1/3">
      <SpecCard specifications={product.specifications} />
    </div>
  </div>
</div>