feat: added product page
This commit is contained in:
Tobias Klemp
@@ -13,6 +13,9 @@
|
||||
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'
|
||||
|
||||
async function crawlClevertronik() {
|
||||
const response = await fetch('/crawl', { method: 'POST' })
|
||||
@@ -30,11 +33,28 @@
|
||||
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',
|
||||
],
|
||||
{
|
||||
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',
|
||||
@@ -159,23 +179,98 @@
|
||||
},
|
||||
] 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>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
@@ -192,8 +287,13 @@
|
||||
<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>
|
||||
<button onclick={crawlClevertronik}>lets do it</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user