@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/product-listing/ProductListing04.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		searchQuery?: string;
+	}
+
+	let { class: className, searchQuery = 'laptop' }: Props = $props();
+
+	let sortBy = $state('relevance');
+	let currentPage = $state(1);
+	const itemsPerPage = 12;
+
+	const products = Array.from({ length: 28 }, (_, i) => ({
+		id: i + 1,
+		name: `Product ${i + 1}`,
+		price: 49.99 + i * 10,
+		rating: 4 + Math.random(),
+		reviews: Math.floor(50 + Math.random() * 200),
+		sponsored: i % 7 === 0,
+	}));
+
+	$derived totalPages = Math.ceil(products.length / itemsPerPage);
+	$derived paginatedProducts = products.slice(
+		(currentPage - 1) * itemsPerPage,
+		currentPage * itemsPerPage
+	);
+</script>
+
+<section class={cn('w-full bg-background px-4 py-12 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<!-- Search Bar -->
+		<div class="mb-8">
+			<div class="flex items-center gap-2 bg-gray-100 rounded-lg px-4 py-3">
+				<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-muted-foreground">
+					<circle cx="11" cy="11" r="8" />
+					<path d="m21 21-4.35-4.35" />
+				</svg>
+				<input
+					type="text"
+					placeholder="Search..."
+					value={searchQuery}
+					class="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground"
+				/>
+			</div>
+		</div>
+
+		<!-- Results Header -->
+		<div class="flex items-center justify-between mb-6 pb-6 border-b">
+			<div>
+				<p class="text-sm text-muted-foreground">Found {products.length} results for <strong>"{searchQuery}"</strong></p>
+			</div>
+
+			<!-- Controls -->
+			<div class="flex items-center gap-3">
+				<!-- Sort -->
+				<select
+					bind:value={sortBy}
+					class="px-3 py-2 text-sm border rounded-lg bg-background text-foreground"
+				>
+					<option value="relevance">Sort: Relevance</option>
+					<option value="price-low">Price: Low to High</option>
+					<option value="price-high">Price: High to Low</option>
+					<option value="rating">Rating</option>
+				</select>
+
+				<!-- Filter -->
+				<button class="px-3 py-2 text-sm border rounded-lg bg-background text-foreground hover:bg-gray-50">
+					Filter
+				</button>
+			</div>
+		</div>
+
+		<!-- Products Grid -->
+		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 mb-12">
+			{#each paginatedProducts as product (product.id)}
+				<div class="flex flex-col relative">
+					<!-- Sponsored Badge -->
+					{#if product.sponsored}
+						<div class="absolute top-2 left-2 bg-red-100 text-red-700 text-xs font-semibold px-2 py-1 rounded">
+							Sponsored
+						</div>
+					{/if}
+
+					<!-- Product Image -->
+					<div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center mb-4">
+						<svg
+							width="40"
+							height="40"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1"
+							class="text-gray-400"
+						>
+							<rect x="3" y="3" width="18" height="18" rx="2" />
+							<circle cx="8.5" cy="8.5" r="1.5" />
+							<polyline points="21 15 16 10 5 21" />
+						</svg>
+					</div>
+
+					<!-- Product Info -->
+					<h3 class="font-semibold text-sm mb-2">{product.name}</h3>
+
+					<!-- Rating -->
+					<div class="flex items-center gap-1 mb-2">
+						<div class="flex gap-0.5">
+							{#each { length: 5 } as _, i}
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill={i < Math.floor(product.rating) ? 'currentColor' : 'none'}
+									stroke="currentColor"
+									stroke-width="1"
+									class={i < Math.floor(product.rating) ? 'text-yellow-400' : 'text-gray-300'}
+								>
+									<polygon points="12 2 15.09 10.26 24 10.35 17.77 16.88 20.16 25.54 12 20.01 3.84 25.54 6.23 16.88 0 10.35 8.91 10.26" />
+								</svg>
+							{/each}
+						</div>
+						<span class="text-xs text-muted-foreground">({product.reviews})</span>
+					</div>
+
+					<!-- Price -->
+					<p class="text-lg font-bold mb-4">${product.price.toFixed(2)}</p>
+
+					<!-- Add to Cart -->
+					<Button class="w-full" size="sm">Add to Cart</Button>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Pagination -->
+		<div class="flex items-center justify-center gap-2">
+			<button
+				disabled={currentPage === 1}
+				onclick={() => (currentPage = Math.max(1, currentPage - 1))}
+				class={cn(
+					'px-3 py-2 rounded-lg border transition-colors',
+					currentPage === 1
+						? 'opacity-50 cursor-not-allowed'
+						: 'border-gray-300 text-foreground hover:bg-gray-50'
+				)}
+			>
+				Previous
+			</button>
+
+			{#each { length: totalPages } as _, i}
+				<button
+					onclick={() => (currentPage = i + 1)}
+					class={cn(
+						'w-10 h-10 rounded-lg border transition-colors',
+						currentPage === i + 1
+							? 'bg-primary text-primary-foreground border-primary'
+							: 'border-gray-300 text-foreground hover:bg-gray-50'
+					)}
+				>
+					{i + 1}
+				</button>
+			{/each}
+
+			<button
+				disabled={currentPage === totalPages}
+				onclick={() => (currentPage = Math.min(totalPages, currentPage + 1))}
+				class={cn(
+					'px-3 py-2 rounded-lg border transition-colors',
+					currentPage === totalPages
+						? 'opacity-50 cursor-not-allowed'
+						: 'border-gray-300 text-foreground hover:bg-gray-50'
+				)}
+			>
+				Next
+			</button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/product-listing/ProductListing05.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className }: Props = $props();
+
+	let savedItems = $state([
+		{ id: 1, name: 'Product 1', price: 49.99, rating: 4.5 },
+		{ id: 2, name: 'Product 2', price: 79.99, rating: 4.8 },
+		{ id: 3, name: 'Product 3', price: 129.99, rating: 4.2 },
+		{ id: 4, name: 'Product 4', price: 59.99, rating: 4.7 },
+		{ id: 5, name: 'Product 5', price: 89.99, rating: 4.3 },
+		{ id: 6, name: 'Product 6', price: 99.99, rating: 4.6 },
+		{ id: 7, name: 'Product 7', price: 69.99, rating: 4.4 },
+		{ id: 8, name: 'Product 8', price: 149.99, rating: 4.9 },
+		{ id: 9, name: 'Product 9', price: 39.99, rating: 4.1 },
+		{ id: 10, name: 'Product 10', price: 109.99, rating: 4.5 },
+		{ id: 11, name: 'Product 11', price: 119.99, rating: 4.8 },
+		{ id: 12, name: 'Product 12', price: 139.99, rating: 4.7 },
+	]);
+
+	function removeItem(id: number) {
+		savedItems = savedItems.filter((item) => item.id !== id);
+	}
+</script>
+
+<section class={cn('w-full bg-background px-4 py-12 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<!-- Page Header -->
+		<div class="mb-12">
+			<h1 class="text-4xl sm:text-5xl font-bold">Saved Items</h1>
+			<p class="mt-2 text-muted-foreground">
+				{savedItems.length} item{savedItems.length !== 1 ? 's' : ''} in your wishlist
+			</p>
+		</div>
+
+		{#if savedItems.length > 0}
+			<!-- Products Grid -->
+			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+				{#each savedItems as item (item.id)}
+					<div class="flex flex-col relative">
+						<!-- Remove Button -->
+						<button
+							onclick={() => removeItem(item.id)}
+							class="absolute top-2 right-2 w-8 h-8 rounded-full bg-red-100 hover:bg-red-200 text-red-600 flex items-center justify-center transition-colors z-10"
+							aria-label="Remove from wishlist"
+						>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<line x1="18" y1="6" x2="6" y2="18" />
+								<line x1="6" y1="6" x2="18" y2="18" />
+							</svg>
+						</button>
+
+						<!-- Product Image -->
+						<div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center mb-4">
+							<svg
+								width="40"
+								height="40"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1"
+								class="text-gray-400"
+							>
+								<rect x="3" y="3" width="18" height="18" rx="2" />
+								<circle cx="8.5" cy="8.5" r="1.5" />
+								<polyline points="21 15 16 10 5 21" />
+							</svg>
+						</div>
+
+						<!-- Product Info -->
+						<h3 class="font-semibold text-sm mb-2">{item.name}</h3>
+
+						<!-- Rating -->
+						<div class="flex items-center gap-1 mb-2">
+							<div class="flex gap-0.5">
+								{#each { length: 5 } as _, i}
+									<svg
+										width="14"
+										height="14"
+										viewBox="0 0 24 24"
+										fill={i < Math.floor(item.rating) ? 'currentColor' : 'none'}
+										stroke="currentColor"
+										stroke-width="1"
+										class={i < Math.floor(item.rating) ? 'text-yellow-400' : 'text-gray-300'}
+									>
+										<polygon points="12 2 15.09 10.26 24 10.35 17.77 16.88 20.16 25.54 12 20.01 3.84 25.54 6.23 16.88 0 10.35 8.91 10.26" />
+									</svg>
+								{/each}
+							</div>
+							<span class="text-xs text-muted-foreground">({Math.floor(Math.random() * 200) + 50})</span>
+						</div>
+
+						<!-- Price -->
+						<p class="text-lg font-bold mb-4">${item.price.toFixed(2)}</p>
+
+						<!-- Add to Cart -->
+						<Button class="w-full" size="sm">Add to Cart</Button>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<!-- Empty State -->
+			<div class="text-center py-20">
+				<svg
+					width="64"
+					height="64"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1"
+					class="mx-auto mb-4 text-muted-foreground"
+				>
+					<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+				</svg>
+				<h2 class="text-xl font-semibold mb-2">No saved items yet</h2>
+				<p class="text-muted-foreground mb-6">Start saving your favorite products to your wishlist</p>
+				<Button>Continue Shopping</Button>
+			</div>
+		{/if}
+	</div>
+</section>

package/src/registry/blocks/product-listing/index.ts

@@ -0,0 +1,5 @@
+export { default as ProductListing01 } from './ProductListing01.svelte';
+export { default as ProductListing02 } from './ProductListing02.svelte';
+export { default as ProductListing03 } from './ProductListing03.svelte';
+export { default as ProductListing04 } from './ProductListing04.svelte';
+export { default as ProductListing05 } from './ProductListing05.svelte';

package/src/registry/blocks/product-reviews/ProductReviews01.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		overallRating?: number;
+	}
+
+	let { class: className, overallRating = 4.5 }: Props = $props();
+
+	const ratingDistribution = [
+		{ stars: 5, count: 1250, percentage: 62.5 },
+		{ stars: 4, count: 500, percentage: 25 },
+		{ stars: 3, count: 150, percentage: 7.5 },
+		{ stars: 2, count: 50, percentage: 2.5 },
+		{ stars: 1, count: 50, percentage: 2.5 },
+	];
+
+	const reviews = [
+		{
+			id: 1,
+			author: 'John Doe',
+			date: 'Mar 15, 2024',
+			rating: 5,
+			title: 'Excellent product!',
+			text: 'Really impressed with the quality and build. Highly recommend to anyone considering this product.',
+		},
+		{
+			id: 2,
+			author: 'Sarah Smith',
+			date: 'Mar 12, 2024',
+			rating: 4,
+			title: 'Great value',
+			text: 'Good quality at a reasonable price. Shipping was fast and packaging was secure.',
+		},
+		{
+			id: 3,
+			author: 'Mike Johnson',
+			date: 'Mar 10, 2024',
+			rating: 5,
+			title: 'Best purchase ever',
+			text: 'Exceeded my expectations. Customer service was helpful and responsive.',
+		},
+	];
+</script>
+
+<section class={cn('w-full bg-background px-4 py-12 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-7xl">
+		<div class="grid grid-cols-1 gap-12 lg:grid-cols-2">
+			<!-- Rating Summary -->
+			<div>
+				<div class="mb-8">
+					<div class="flex items-start gap-4">
+						<div>
+							<p class="text-6xl font-bold">{overallRating}</p>
+							<div class="flex gap-0.5 my-2">
+								{#each { length: 5 } as _, i}
+									<svg
+										width="18"
+										height="18"
+										viewBox="0 0 24 24"
+										fill={i < Math.floor(overallRating) ? 'currentColor' : 'none'}
+										stroke="currentColor"
+										stroke-width="1"
+										class={i < Math.floor(overallRating) ? 'text-yellow-400' : 'text-gray-300'}
+									>
+										<polygon points="12 2 15.09 10.26 24 10.35 17.77 16.88 20.16 25.54 12 20.01 3.84 25.54 6.23 16.88 0 10.35 8.91 10.26" />
+									</svg>
+								{/each}
+							</div>
+							<p class="text-sm text-muted-foreground">Based on 2,000 reviews</p>
+						</div>
+					</div>
+				</div>
+
+				<!-- Rating Bars -->
+				<div class="space-y-3">
+					{#each ratingDistribution as distribution}
+						<div class="flex items-center gap-3">
+							<span class="text-sm text-muted-foreground w-12">{distribution.stars}★</span>
+							<div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
+								<div
+									class="h-full bg-yellow-400"
+									style="width: {distribution.percentage}%"
+								/>
+							</div>
+							<span class="text-sm text-muted-foreground w-12 text-right">{distribution.percentage}%</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Reviews List -->
+			<div class="space-y-6">
+				<h3 class="text-xl font-semibold">Recent Reviews</h3>
+				{#each reviews as review (review.id)}
+					<div class="pb-6 border-b last:border-b-0">
+						<div class="flex items-start gap-3 mb-2">
+							<!-- Avatar -->
+							<div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0">
+								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="text-gray-600">
+									<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+									<circle cx="12" cy="7" r="4" />
+								</svg>
+							</div>
+
+							<!-- Review Header -->
+							<div class="flex-1">
+								<div class="flex items-center justify-between mb-1">
+									<h4 class="font-semibold text-sm">{review.author}</h4>
+									<span class="text-xs text-muted-foreground">{review.date}</span>
+								</div>
+
+								<!-- Rating -->
+								<div class="flex gap-0.5 mb-2">
+									{#each { length: 5 } as _, i}
+										<svg
+											width="14"
+											height="14"
+											viewBox="0 0 24 24"
+											fill={i < review.rating ? 'currentColor' : 'none'}
+											stroke="currentColor"
+											stroke-width="1"
+											class={i < review.rating ? 'text-yellow-400' : 'text-gray-300'}
+										>
+											<polygon points="12 2 15.09 10.26 24 10.35 17.77 16.88 20.16 25.54 12 20.01 3.84 25.54 6.23 16.88 0 10.35 8.91 10.26" />
+										</svg>
+									{/each}
+								</div>
+							</div>
+						</div>
+
+						<!-- Review Content -->
+						<h5 class="font-semibold text-sm mb-2">{review.title}</h5>
+						<p class="text-sm text-muted-foreground mb-3">{review.text}</p>
+
+						<!-- Helpful Button -->
+						<button class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1">
+							<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+								<polyline points="20 12 20 22 4 22 4 12" />
+								<polyline points="2 7 12 2 22 7" />
+							</svg>
+							Helpful
+						</button>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- View All Reviews Button -->
+		<div class="mt-12 text-center">
+			<Button variant="outline" size="lg">View All Reviews</Button>
+		</div>
+	</div>
+</section>

package/src/registry/blocks/product-reviews/ProductReviews02.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className }: Props = $props();
+
+	let rating = $state(0);
+	let title = $state('');
+	let review = $state('');
+	let recommend = $state('yes');
+	let imageUploaded = $state(false);
+</script>
+
+<section class={cn('w-full bg-background px-4 py-12 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-2xl">
+		<!-- Form Header -->
+		<div class="mb-8">
+			<h2 class="text-3xl font-bold mb-2">Write a Review</h2>
+			<p class="text-muted-foreground">Share your experience with this product</p>
+		</div>
+
+		<!-- Form -->
+		<form class="space-y-6">
+			<!-- Rating Selector -->
+			<div>
+				<label class="block text-sm font-semibold mb-4">Rating</label>
+				<div class="flex gap-2">
+					{#each { length: 5 } as _, i}
+						<button
+							type="button"
+							onclick={() => (rating = i + 1)}
+							class="transition-transform hover:scale-110"
+						>
+							<svg
+								width="32"
+								height="32"
+								viewBox="0 0 24 24"
+								fill={i < rating ? 'currentColor' : 'none'}
+								stroke="currentColor"
+								stroke-width="1"
+								class={i < rating ? 'text-yellow-400' : 'text-gray-300'}
+							>
+								<polygon points="12 2 15.09 10.26 24 10.35 17.77 16.88 20.16 25.54 12 20.01 3.84 25.54 6.23 16.88 0 10.35 8.91 10.26" />
+							</svg>
+						</button>
+					{/each}
+				</div>
+				{#if rating > 0}
+					<p class="text-sm text-muted-foreground mt-2">You rated this product {rating} star{rating !== 1 ? 's' : ''}</p>
+				{/if}
+			</div>
+
+			<!-- Title -->
+			<div>
+				<label for="title" class="block text-sm font-semibold mb-2">Review Title</label>
+				<input
+					id="title"
+					type="text"
+					bind:value={title}
+					placeholder="Sum up your experience in a few words"
+					class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+				/>
+			</div>
+
+			<!-- Review Text -->
+			<div>
+				<label for="review" class="block text-sm font-semibold mb-2">Your Review</label>
+				<textarea
+					id="review"
+					bind:value={review}
+					placeholder="Tell us what you think about this product"
+					rows="6"
+					class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+				/>
+				<p class="text-xs text-muted-foreground mt-2">{review.length} / 2000 characters</p>
+			</div>
+
+			<!-- Recommendation -->
+			<div>
+				<label class="block text-sm font-semibold mb-3">Would you recommend this product?</label>
+				<div class="flex gap-6">
+					<label class="flex items-center gap-2 cursor-pointer">
+						<input
+							type="radio"
+							name="recommend"
+							value="yes"
+							bind:group={recommend}
+							class="w-4 h-4"
+						/>
+						<span class="text-sm">Yes, I recommend it</span>
+					</label>
+					<label class="flex items-center gap-2 cursor-pointer">
+						<input
+							type="radio"
+							name="recommend"
+							value="no"
+							bind:group={recommend}
+							class="w-4 h-4"
+						/>
+						<span class="text-sm">No, I don't recommend it</span>
+					</label>
+				</div>
+			</div>
+
+			<!-- Image Upload -->
+			<div>
+				<label class="block text-sm font-semibold mb-3">Upload Photos (Optional)</label>
+				<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+					<svg
+						width="40"
+						height="40"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1"
+						class="mx-auto mb-3 text-gray-400"
+					>
+						<rect x="3" y="3" width="18" height="18" rx="2" />
+						<circle cx="8.5" cy="8.5" r="1.5" />
+						<polyline points="21 15 16 10 5 21" />
+					</svg>
+					<p class="text-sm text-muted-foreground mb-2">Drag and drop images here or click to upload</p>
+					<input type="file" accept="image/*" multiple class="hidden" />
+					<p class="text-xs text-muted-foreground">Supported formats: JPG, PNG, GIF</p>
+				</div>
+			</div>
+
+			<!-- Submit -->
+			<div class="flex gap-3 pt-4">
+				<Button class="flex-1" disabled={!title || !review || rating === 0}>Submit Review</Button>
+				<Button variant="outline" class="flex-1">Cancel</Button>
+			</div>
+		</form>
+	</div>
+</section>