@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/cart/Cart04.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	interface CartItem {
+		id: number;
+		name: string;
+		price: number;
+		quantity: number;
+	}
+
+	interface ProductCard {
+		id: number;
+		name: string;
+		price: number;
+		rating: number;
+	}
+
+	let cartItems = $state<CartItem[]>([
+		{ id: 1, name: 'Wireless Headphones', price: 129.99, quantity: 1 },
+		{ id: 2, name: 'Phone Case', price: 24.99, quantity: 1 }
+	]);
+
+	let suggestedProducts = $state<ProductCard[]>([
+		{ id: 101, name: 'USB-C Hub', price: 34.99, rating: 4.8 },
+		{ id: 102, name: 'Portable Charger', price: 49.99, rating: 4.7 },
+		{ id: 103, name: 'Screen Protector', price: 9.99, rating: 4.9 }
+	]);
+
+	let subtotal = $derived(
+		cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+	);
+	let shipping = $derived(subtotal > 100 ? 0 : 9.99);
+	let tax = $derived(subtotal * 0.1);
+	let total = $derived(subtotal + shipping + tax);
+
+	function StarIcon(filled: boolean) {
+		if (filled) {
+			return `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 10.26 24 10.35 17.77 16.01 20.16 24.02 12 18.35 3.84 24.02 6.23 16.01 0 10.35 8.91 10.26 12 2"/></polygon></svg>`;
+		}
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 10.26 24 10.35 17.77 16.01 20.16 24.02 12 18.35 3.84 24.02 6.23 16.01 0 10.35 8.91 10.26 12 2"/></polygon></svg>`;
+	}
+
+	function TrashIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`;
+	}
+
+	function removeItem(id: number) {
+		cartItems = cartItems.filter((item) => item.id !== id);
+	}
+
+	function addToCart(product: ProductCard) {
+		const existing = cartItems.find((item) => item.id === product.id);
+		if (existing) {
+			existing.quantity += 1;
+		} else {
+			cartItems.push({
+				id: product.id,
+				name: product.name,
+				price: product.price,
+				quantity: 1
+			});
+		}
+	}
+</script>
+
+<div class={cn('space-y-8', className)}>
+	<div>
+		<h1 class="text-3xl font-bold">Shopping Cart</h1>
+	</div>
+
+	<div class="grid gap-8 lg:grid-cols-3">
+		<!-- Left Column: Cart Items + Upsell -->
+		<div class="lg:col-span-2 space-y-8">
+			<!-- Cart Items -->
+			<div class="rounded-lg border bg-background overflow-hidden">
+				<div class="p-6 border-b">
+					<h2 class="text-lg font-semibold">Cart Items ({cartItems.length})</h2>
+				</div>
+				<div class="divide-y">
+					{#each cartItems as item (item.id)}
+						<div class="p-6 flex gap-4 items-start hover:bg-muted/30 transition">
+							<div class="aspect-square w-20 h-20 bg-gray-100 rounded flex-shrink-0">
+							</div>
+							<div class="flex-1 min-w-0">
+								<p class="font-medium">{item.name}</p>
+								<p class="text-sm text-muted-foreground mt-1">Qty: {item.quantity}</p>
+								<p class="font-semibold mt-2">${(item.price * item.quantity).toFixed(2)}</p>
+							</div>
+							<button
+								onclick={() => removeItem(item.id)}
+								class="p-2 hover:bg-destructive/10 text-destructive rounded transition flex-shrink-0"
+							>
+								{@html TrashIcon()}
+							</button>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Upsell Section -->
+			<div class="space-y-4">
+				<h2 class="text-lg font-semibold">You might also like</h2>
+				<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+					{#each suggestedProducts as product (product.id)}
+						<div class="rounded-lg border bg-background overflow-hidden hover:shadow-md transition">
+							<div class="aspect-square w-full bg-gray-100 flex items-center justify-center">
+							</div>
+							<div class="p-4 space-y-3">
+								<p class="font-medium text-sm line-clamp-2">{product.name}</p>
+								<div class="flex items-center gap-1">
+									{#each { length: 5 } as _, i}
+										<div class="text-yellow-400">
+											{@html StarIcon(i < Math.floor(product.rating))}
+										</div>
+									{/each}
+									<span class="text-xs text-muted-foreground ml-1">({product.rating})</span>
+								</div>
+								<div class="flex items-center justify-between">
+									<p class="font-semibold">${product.price.toFixed(2)}</p>
+									<Button
+										size="sm"
+										onclick={() => addToCart(product)}
+									>
+										Add
+									</Button>
+								</div>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+
+		<!-- Right Column: Order Summary -->
+		<div class="lg:col-span-1">
+			<div class="rounded-lg border bg-background p-6 sticky top-6 space-y-6">
+				<div>
+					<h2 class="text-lg font-semibold mb-4">Order Summary</h2>
+
+					<div class="space-y-3 text-sm">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Subtotal</span>
+							<span>${subtotal.toFixed(2)}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Shipping</span>
+							<span>{shipping === 0 ? 'FREE' : `$${shipping.toFixed(2)}`}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Tax</span>
+							<span>${tax.toFixed(2)}</span>
+						</div>
+					</div>
+
+					<div class="border-t mt-4 pt-4 flex justify-between font-semibold text-base">
+						<span>Total</span>
+						<span>${total.toFixed(2)}</span>
+					</div>
+				</div>
+
+				<Button class="w-full">
+					Proceed to checkout
+				</Button>
+			</div>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/cart/index.ts

@@ -0,0 +1,4 @@
+export { default as Cart01 } from './Cart01.svelte';
+export { default as Cart02 } from './Cart02.svelte';
+export { default as Cart03 } from './Cart03.svelte';
+export { default as Cart04 } from './Cart04.svelte';

package/src/registry/blocks/checkout/Checkout01.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	let email = $state('customer@example.com');
+	let firstName = $state('John');
+	let lastName = $state('Doe');
+	let address = $state('123 Main Street');
+	let city = $state('New York');
+	let state = $state('NY');
+	let zip = $state('10001');
+	let country = $state('United States');
+	let shippingMethod = $state('standard');
+
+	interface OrderItem {
+		id: number;
+		name: string;
+		price: number;
+		quantity: number;
+	}
+
+	let orderItems = $state<OrderItem[]>([
+		{ id: 1, name: 'Wireless Headphones', price: 129.99, quantity: 1 },
+		{ id: 2, name: 'Phone Case', price: 24.99, quantity: 1 }
+	]);
+
+	let subtotal = $derived(
+		orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+	);
+
+	let shippingCost = $derived(shippingMethod === 'express' ? 24.99 : 9.99);
+	let tax = $derived(subtotal * 0.1);
+	let total = $derived(subtotal + shippingCost + tax);
+
+	function GlobeIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 1 10 4M12 22a14.5 14.5 0 0 1-10-4M2 12h20M12 2a14.5 14.5 0 0 0 0 20M12 22a14.5 14.5 0 0 0 0-20"/></svg>`;
+	}
+</script>
+
+<div class={cn('space-y-8', className)}>
+	<div>
+		<h1 class="text-3xl font-bold">Checkout</h1>
+		<p class="text-muted-foreground mt-2">Complete your purchase</p>
+	</div>
+
+	<div class="grid gap-8 lg:grid-cols-3">
+		<!-- Left Column: Forms -->
+		<div class="lg:col-span-2 space-y-6">
+			<!-- Contact Info -->
+			<div class="rounded-lg border bg-background p-6">
+				<h2 class="text-lg font-semibold mb-4">Contact information</h2>
+				<div>
+					<label class="block text-sm font-medium mb-2">Email address</label>
+					<input
+						type="email"
+						bind:value={email}
+						placeholder="email@example.com"
+						class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+					/>
+				</div>
+			</div>
+
+			<!-- Delivery Address -->
+			<div class="rounded-lg border bg-background p-6">
+				<h2 class="text-lg font-semibold mb-4">Delivery address</h2>
+				<div class="space-y-4">
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<label class="block text-sm font-medium mb-2">First name</label>
+							<input
+								type="text"
+								bind:value={firstName}
+								placeholder="John"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+						<div>
+							<label class="block text-sm font-medium mb-2">Last name</label>
+							<input
+								type="text"
+								bind:value={lastName}
+								placeholder="Doe"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+					</div>
+
+					<div>
+						<label class="block text-sm font-medium mb-2">Street address</label>
+						<input
+							type="text"
+							bind:value={address}
+							placeholder="Street address"
+							class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+						/>
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<label class="block text-sm font-medium mb-2">City</label>
+							<input
+								type="text"
+								bind:value={city}
+								placeholder="City"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+						<div>
+							<label class="block text-sm font-medium mb-2">State</label>
+							<input
+								type="text"
+								bind:value={state}
+								placeholder="State"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+					</div>
+
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<label class="block text-sm font-medium mb-2">Zip code</label>
+							<input
+								type="text"
+								bind:value={zip}
+								placeholder="Zip code"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+						<div>
+							<label class="block text-sm font-medium mb-2">Country</label>
+							<div class="relative">
+								<select
+									bind:value={country}
+									class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring appearance-none pr-8"
+								>
+									<option>United States</option>
+									<option>Canada</option>
+									<option>United Kingdom</option>
+									<option>Australia</option>
+								</select>
+								<div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+									{@html GlobeIcon()}
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Shipping Method -->
+			<div class="rounded-lg border bg-background p-6">
+				<h2 class="text-lg font-semibold mb-4">Shipping method</h2>
+				<div class="space-y-3">
+					<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-muted/50 transition"
+						class:bg-muted={shippingMethod === 'standard'}
+					>
+						<input
+							type="radio"
+							bind:group={shippingMethod}
+							value="standard"
+							class="w-4 h-4"
+						/>
+						<div class="flex-1">
+							<p class="font-medium">Standard Shipping</p>
+							<p class="text-sm text-muted-foreground">Delivery in 5-7 business days</p>
+						</div>
+						<span class="font-semibold">$9.99</span>
+					</label>
+
+					<label class="flex items-center gap-3 p-3 border rounded-lg cursor-pointer hover:bg-muted/50 transition"
+						class:bg-muted={shippingMethod === 'express'}
+					>
+						<input
+							type="radio"
+							bind:group={shippingMethod}
+							value="express"
+							class="w-4 h-4"
+						/>
+						<div class="flex-1">
+							<p class="font-medium">Express Shipping</p>
+							<p class="text-sm text-muted-foreground">Delivery in 1-2 business days</p>
+						</div>
+						<span class="font-semibold">$24.99</span>
+					</label>
+				</div>
+			</div>
+		</div>
+
+		<!-- Right Column: Order Summary -->
+		<div class="lg:col-span-1">
+			<div class="rounded-lg border bg-background p-6 sticky top-6 space-y-6">
+				<div>
+					<h2 class="text-lg font-semibold mb-4">Order summary</h2>
+
+					<div class="space-y-3 mb-4">
+						{#each orderItems as item (item.id)}
+							<div class="flex justify-between text-sm">
+								<span class="text-muted-foreground">{item.name} x {item.quantity}</span>
+								<span>${(item.price * item.quantity).toFixed(2)}</span>
+							</div>
+						{/each}
+					</div>
+
+					<div class="border-t pt-4 space-y-2 text-sm">
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Subtotal</span>
+							<span>${subtotal.toFixed(2)}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Shipping</span>
+							<span>${shippingCost.toFixed(2)}</span>
+						</div>
+						<div class="flex justify-between">
+							<span class="text-muted-foreground">Tax</span>
+							<span>${tax.toFixed(2)}</span>
+						</div>
+					</div>
+
+					<div class="border-t mt-4 pt-4 flex justify-between font-semibold text-base">
+						<span>Total</span>
+						<span>${total.toFixed(2)}</span>
+					</div>
+				</div>
+
+				<Button class="w-full">
+					Place order
+				</Button>
+			</div>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/checkout/Checkout02.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	let currentStep = $state(1);
+	let email = $state('customer@example.com');
+	let firstName = $state('John');
+	let lastName = $state('Doe');
+
+	const steps = [
+		{ number: 1, title: 'Cart', label: 'Cart' },
+		{ number: 2, title: 'Information', label: 'Information' },
+		{ number: 3, title: 'Shipping', label: 'Shipping' },
+		{ number: 4, title: 'Payment', label: 'Payment' }
+	];
+
+	function nextStep() {
+		if (currentStep < steps.length) {
+			currentStep += 1;
+		}
+	}
+
+	function prevStep() {
+		if (currentStep > 1) {
+			currentStep -= 1;
+		}
+	}
+
+	function ChevronRightIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`;
+	}
+</script>
+
+<div class={cn('space-y-8', className)}>
+	<div>
+		<h1 class="text-3xl font-bold">Checkout</h1>
+	</div>
+
+	<!-- Step Indicators -->
+	<div class="rounded-lg border bg-background p-6">
+		<div class="flex items-center justify-between">
+			{#each steps as step, idx}
+				<div class="flex items-center flex-1" key={step.number}>
+					<div
+						class={cn(
+							'w-10 h-10 rounded-full flex items-center justify-center font-semibold transition',
+							currentStep >= step.number
+								? 'bg-black text-white'
+								: 'bg-gray-200 text-gray-600'
+						)}
+					>
+						{step.number}
+					</div>
+					<p class="ml-3 text-sm font-medium">{step.title}</p>
+					{#if idx < steps.length - 1}
+						<div class="flex-1 h-0.5 mx-4 transition"
+							class:bg-black={currentStep > step.number}
+							class:bg-gray-200={currentStep <= step.number}
+						></div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Step Content -->
+	<div class="rounded-lg border bg-background p-8 min-h-[400px]">
+		{#if currentStep === 1}
+			<div class="space-y-4">
+				<h2 class="text-2xl font-semibold">Your Cart</h2>
+				<div class="space-y-3 mt-6">
+					<div class="flex justify-between p-4 border rounded-lg">
+						<span>Wireless Headphones x 1</span>
+						<span class="font-semibold">$129.99</span>
+					</div>
+					<div class="flex justify-between p-4 border rounded-lg">
+						<span>Phone Case x 1</span>
+						<span class="font-semibold">$24.99</span>
+					</div>
+				</div>
+				<div class="border-t pt-4 mt-6">
+					<div class="flex justify-between font-semibold text-lg">
+						<span>Total</span>
+						<span>$154.99</span>
+					</div>
+				</div>
+			</div>
+		{:else if currentStep === 2}
+			<div class="space-y-4">
+				<h2 class="text-2xl font-semibold">Contact Information</h2>
+				<div class="mt-6 space-y-4">
+					<div>
+						<label class="block text-sm font-medium mb-2">Email address</label>
+						<input
+							type="email"
+							bind:value={email}
+							placeholder="email@example.com"
+							class="w-full max-w-md rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+						/>
+					</div>
+					<div class="grid grid-cols-2 gap-4 max-w-md">
+						<div>
+							<label class="block text-sm font-medium mb-2">First name</label>
+							<input
+								type="text"
+								bind:value={firstName}
+								placeholder="John"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+						<div>
+							<label class="block text-sm font-medium mb-2">Last name</label>
+							<input
+								type="text"
+								bind:value={lastName}
+								placeholder="Doe"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		{:else if currentStep === 3}
+			<div class="space-y-4">
+				<h2 class="text-2xl font-semibold">Shipping Method</h2>
+				<div class="mt-6 space-y-3 max-w-md">
+					<label class="flex items-center gap-3 p-4 border rounded-lg cursor-pointer hover:bg-muted/50 transition">
+						<input type="radio" name="shipping" class="w-4 h-4" defaultChecked />
+						<div class="flex-1">
+							<p class="font-medium">Standard Shipping</p>
+							<p class="text-sm text-muted-foreground">5-7 business days</p>
+						</div>
+						<span class="font-semibold">$9.99</span>
+					</label>
+					<label class="flex items-center gap-3 p-4 border rounded-lg cursor-pointer hover:bg-muted/50 transition">
+						<input type="radio" name="shipping" class="w-4 h-4" />
+						<div class="flex-1">
+							<p class="font-medium">Express Shipping</p>
+							<p class="text-sm text-muted-foreground">1-2 business days</p>
+						</div>
+						<span class="font-semibold">$24.99</span>
+					</label>
+				</div>
+			</div>
+		{:else if currentStep === 4}
+			<div class="space-y-4">
+				<h2 class="text-2xl font-semibold">Payment</h2>
+				<div class="mt-6 space-y-4 max-w-md">
+					<div>
+						<label class="block text-sm font-medium mb-2">Card number</label>
+						<input
+							type="text"
+							placeholder="•••• •••• •••• ••••"
+							class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+						/>
+					</div>
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<label class="block text-sm font-medium mb-2">Expiry</label>
+							<input
+								type="text"
+								placeholder="MM/YY"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+						<div>
+							<label class="block text-sm font-medium mb-2">CVV</label>
+							<input
+								type="text"
+								placeholder="•••"
+								class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Navigation -->
+	<div class="flex gap-4 justify-between">
+		<Button
+			variant="outline"
+			onclick={prevStep}
+			disabled={currentStep === 1}
+		>
+			Back
+		</Button>
+		<Button
+			onclick={nextStep}
+			disabled={currentStep === steps.length}
+		>
+			{currentStep === steps.length ? 'Complete' : 'Continue'}
+			{#if currentStep < steps.length}
+				<span class="ml-2">{@html ChevronRightIcon()}</span>
+			{/if}
+		</Button>
+	</div>
+</div>