feat: added product page

src/lib/components/ui/image-carousel/ImageCarouselItem.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from '$lib/utils'
+  import type { ImageCarouselItem } from '.'
+  import * as Carousel from '../carousel'
+
+  const {
+    item,
+    class: className,
+    isSelected,
+    onclick,
+  }: {
+    item: ImageCarouselItem
+    class?: string
+    isSelected?: boolean
+    onclick?: () => void
+  } = $props()
+
+  const itemClass = $derived(
+    cn(
+      'object-cover rounded-lg',
+      isSelected
+        ? 'border-2 transition-all border-blue-600 dark:border-blue-500'
+        : 'border-2 transition-all border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600',
+      !item.aspect || item.aspect === '1:1' ? 'aspect-square' : '',
+      item.aspect === '16:9' ? 'aspect-video' : '',
+      item.aspect === '9:16' ? 'aspect-9/16' : '',
+      item.aspect === '4:3' ? 'aspect-4/3' : '',
+    ),
+  )
+</script>
+
+<Carousel.Item {onclick} class={className}>
+  <img src={item.image} alt={item.alt} class={itemClass} />
+</Carousel.Item>