@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/order-history/OrderHistory01.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	type OrderStatus = 'all' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
+
+	interface Order {
+		id: string;
+		orderNumber: string;
+		date: string;
+		items: number;
+		total: number;
+		status: string;
+		statusType: 'processing' | 'shipped' | 'delivered' | 'cancelled';
+	}
+
+	let activeFilter = $state<OrderStatus>('all');
+	let currentPage = $state(1);
+
+	let allOrders = $state<Order[]>([
+		{
+			id: '1',
+			orderNumber: 'ORD-2024-001234',
+			date: 'March 28, 2026',
+			items: 3,
+			total: 154.99,
+			status: 'Delivered',
+			statusType: 'delivered'
+		},
+		{
+			id: '2',
+			orderNumber: 'ORD-2024-001233',
+			date: 'March 22, 2026',
+			items: 2,
+			total: 89.98,
+			status: 'Shipped',
+			statusType: 'shipped'
+		},
+		{
+			id: '3',
+			orderNumber: 'ORD-2024-001232',
+			date: 'March 15, 2026',
+			items: 1,
+			total: 129.99,
+			status: 'Processing',
+			statusType: 'processing'
+		},
+		{
+			id: '4',
+			orderNumber: 'ORD-2024-001231',
+			date: 'March 10, 2026',
+			items: 4,
+			total: 249.96,
+			status: 'Delivered',
+			statusType: 'delivered'
+		},
+		{
+			id: '5',
+			orderNumber: 'ORD-2024-001230',
+			date: 'February 28, 2026',
+			items: 2,
+			total: 59.98,
+			status: 'Cancelled',
+			statusType: 'cancelled'
+		}
+	]);
+
+	let filteredOrders = $derived(() => {
+		if (activeFilter === 'all') {
+			return allOrders;
+		}
+		return allOrders.filter((order) => order.statusType === activeFilter);
+	})();
+
+	let paginatedOrders = $derived(() => {
+		const itemsPerPage = 5;
+		const startIdx = (currentPage - 1) * itemsPerPage;
+		return filteredOrders.slice(startIdx, startIdx + itemsPerPage);
+	})();
+
+	let totalPages = $derived(Math.ceil(filteredOrders.length / 5));
+
+	function getStatusColor(status: string) {
+		switch (status) {
+			case 'delivered':
+				return 'bg-green-100 text-green-800';
+			case 'shipped':
+				return 'bg-blue-100 text-blue-800';
+			case 'processing':
+				return 'bg-yellow-100 text-yellow-800';
+			case 'cancelled':
+				return 'bg-red-100 text-red-800';
+			default:
+				return 'bg-gray-100 text-gray-800';
+		}
+	}
+
+	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)}>
+	<!-- Header -->
+	<div>
+		<h1 class="text-3xl font-bold">Your Orders</h1>
+		<p class="text-muted-foreground mt-2">Track and manage all your purchases</p>
+	</div>
+
+	<!-- Filter Tabs -->
+	<div class="flex gap-2 border-b">
+		{#each ['all', 'processing', 'shipped', 'delivered', 'cancelled'] as filter}
+			<button
+				onclick={() => {
+					activeFilter = filter as OrderStatus;
+					currentPage = 1;
+				}}
+				class={cn(
+					'px-4 py-2 border-b-2 transition font-medium text-sm',
+					activeFilter === filter
+						? 'border-black text-black'
+						: 'border-transparent text-muted-foreground hover:text-foreground'
+				)}
+			>
+				{filter.charAt(0).toUpperCase() + filter.slice(1)}
+			</button>
+		{/each}
+	</div>
+
+	<!-- Orders Table -->
+	<div class="rounded-lg border bg-background overflow-hidden">
+		<div class="overflow-x-auto">
+			<table class="w-full">
+				<thead class="border-b bg-muted/50">
+					<tr>
+						<th class="px-6 py-3 text-left text-sm font-semibold">Order</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold">Date</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold">Items</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold">Total</th>
+						<th class="px-6 py-3 text-left text-sm font-semibold">Status</th>
+						<th class="px-6 py-3 text-right text-sm font-semibold">Action</th>
+					</tr>
+				</thead>
+				<tbody class="divide-y">
+					{#each paginatedOrders as order (order.id)}
+						<tr class="hover:bg-muted/30 transition">
+							<td class="px-6 py-4">
+								<p class="font-mono font-semibold text-sm">{order.orderNumber}</p>
+							</td>
+							<td class="px-6 py-4 text-sm">{order.date}</td>
+							<td class="px-6 py-4 text-sm">{order.items} item{order.items !== 1 ? 's' : ''}</td>
+							<td class="px-6 py-4 font-semibold">${order.total.toFixed(2)}</td>
+							<td class="px-6 py-4">
+								<span
+									class={cn(
+										'px-3 py-1 rounded-full text-xs font-semibold',
+										getStatusColor(order.statusType)
+									)}
+								>
+									{order.status}
+								</span>
+							</td>
+							<td class="px-6 py-4 text-right">
+								<button class="flex items-center gap-1 text-sm font-medium text-primary hover:underline">
+									View details
+									<span>{@html ChevronRightIcon()}</span>
+								</button>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+
+	<!-- Pagination -->
+	{#if totalPages > 1}
+		<div class="flex items-center justify-between">
+			<p class="text-sm text-muted-foreground">
+				Showing page {currentPage} of {totalPages}
+			</p>
+			<div class="flex gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					onclick={() => (currentPage = Math.max(1, currentPage - 1))}
+					disabled={currentPage === 1}
+				>
+					Previous
+				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					onclick={() => (currentPage = Math.min(totalPages, currentPage + 1))}
+					disabled={currentPage === totalPages}
+				>
+					Next
+				</Button>
+			</div>
+		</div>
+	{/if}
+</div>

package/src/registry/blocks/order-history/OrderHistory02.svelte

@@ -0,0 +1,131 @@
+<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 OrderItem {
+		id: number;
+		name: string;
+		price: number;
+		quantity: number;
+	}
+
+	const orderNumber = 'ORD-2024-001234';
+	const orderDate = 'March 28, 2026';
+	const status = 'Delivered';
+
+	let orderItems = $state<OrderItem[]>([
+		{ id: 1, name: 'Wireless Headphones', price: 129.99, quantity: 1 },
+		{ id: 2, name: 'Phone Case', price: 24.99, quantity: 1 },
+		{ id: 3, name: 'USB-C Cable', price: 19.99, quantity: 1 }
+	]);
+
+	let subtotal = $derived(
+		orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+	);
+	let shipping = $derived(0);
+	let tax = $derived(subtotal * 0.1);
+	let total = $derived(subtotal + shipping + tax);
+
+	function ChevronLeftIcon() {
+		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="15 18 9 12 15 6"/></svg>`;
+	}
+</script>
+
+<div class={cn('space-y-8', className)}>
+	<!-- Back Button -->
+	<button class="flex items-center gap-2 text-primary hover:underline font-medium mb-4">
+		{@html ChevronLeftIcon()}
+		Back to orders
+	</button>
+
+	<!-- Header -->
+	<div class="flex items-start justify-between">
+		<div>
+			<h1 class="text-3xl font-bold">Order {orderNumber}</h1>
+			<p class="text-muted-foreground mt-2">{orderDate}</p>
+		</div>
+		<span class="px-4 py-2 rounded-full bg-green-100 text-green-800 font-semibold text-sm">
+			{status}
+		</span>
+	</div>
+
+	<!-- Main Content -->
+	<div class="grid gap-8 lg:grid-cols-3">
+		<!-- Left: Order Items -->
+		<div class="lg:col-span-2">
+			<div class="rounded-lg border bg-background p-6">
+				<h2 class="text-lg font-semibold mb-4">Order items</h2>
+				<div class="space-y-4">
+					{#each orderItems as item (item.id)}
+						<div class="flex gap-4 p-4 border rounded-lg 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">Quantity: {item.quantity}</p>
+								<p class="font-semibold mt-2">${(item.price * item.quantity).toFixed(2)}</p>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+
+		<!-- Right: Sidebar -->
+		<div class="lg:col-span-1 space-y-6">
+			<!-- Shipping Address -->
+			<div class="rounded-lg border bg-background p-6">
+				<h3 class="font-semibold mb-3">Shipping address</h3>
+				<div class="space-y-1 text-sm text-muted-foreground">
+					<p class="font-medium text-foreground">John Doe</p>
+					<p>123 Main Street</p>
+					<p>New York, NY 10001</p>
+					<p>United States</p>
+				</div>
+			</div>
+
+			<!-- Payment Method -->
+			<div class="rounded-lg border bg-background p-6">
+				<h3 class="font-semibold mb-3">Payment method</h3>
+				<div class="space-y-1 text-sm text-muted-foreground">
+					<p class="font-medium text-foreground">Visa ending in 4242</p>
+					<p>Expires 05/2025</p>
+				</div>
+			</div>
+
+			<!-- Order Summary -->
+			<div class="rounded-lg border bg-background p-6">
+				<h3 class="font-semibold mb-4">Order summary</h3>
+				<div class="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>{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 class="border-t pt-2 mt-2 flex justify-between font-semibold">
+						<span>Total</span>
+						<span>${total.toFixed(2)}</span>
+					</div>
+				</div>
+			</div>
+
+			<!-- Actions -->
+			<Button class="w-full">
+				Download invoice
+			</Button>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/order-history/OrderHistory03.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+	}
+
+	const { class: className }: Props = $props();
+
+	const orderNumber = 'ORD-2024-001234';
+	const status = 'In Transit';
+	const estimatedDelivery = 'April 5, 2026';
+	const trackingNumber = 'FDX7845629123456';
+	const carrier = 'FedEx';
+
+	interface TrackingStep {
+		title: string;
+		date: string;
+		completed: boolean;
+		location: string;
+	}
+
+	let trackingSteps = $state<TrackingStep[]>([
+		{ title: 'Order Placed', date: 'March 28, 2026', completed: true, location: 'New York, NY' },
+		{ title: 'Processing', date: 'March 29, 2026', completed: true, location: 'Warehouse' },
+		{ title: 'Shipped', date: 'March 30, 2026', completed: true, location: 'Distribution Center' },
+		{ title: 'Out for Delivery', date: 'April 4, 2026', completed: true, location: 'Local facility' },
+		{ title: 'Delivered', date: 'April 5, 2026', completed: false, location: 'Your address' }
+	]);
+
+	function CheckIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+	}
+
+	function TruckIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 18h22"/><path d="M3 6h12v11H3z"/><path d="M15 6h6l3 3v8h-9z"/><circle cx="6.5" cy="17.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>`;
+	}
+</script>
+
+<div class={cn('space-y-8', className)}>
+	<!-- Header -->
+	<div class="space-y-2">
+		<h1 class="text-3xl font-bold">Track Order</h1>
+		<p class="text-muted-foreground">Order {orderNumber}</p>
+	</div>
+
+	<!-- Status Card -->
+	<div class="rounded-lg border bg-background p-8 space-y-6">
+		<div class="flex items-start justify-between">
+			<div>
+				<p class="text-muted-foreground text-sm mb-1">Current status</p>
+				<h2 class="text-2xl font-semibold">{status}</h2>
+				<p class="text-muted-foreground mt-2">Estimated delivery: {estimatedDelivery}</p>
+			</div>
+			<div class="text-blue-600">
+				{@html TruckIcon()}
+			</div>
+		</div>
+
+		<!-- Carrier & Tracking -->
+		<div class="border-t pt-6 grid grid-cols-2 gap-8">
+			<div>
+				<p class="text-sm text-muted-foreground mb-1">Carrier</p>
+				<p class="font-semibold">{carrier}</p>
+			</div>
+			<div>
+				<p class="text-sm text-muted-foreground mb-1">Tracking number</p>
+				<p class="font-mono font-semibold text-sm break-all">{trackingNumber}</p>
+			</div>
+		</div>
+	</div>
+
+	<!-- Tracking Timeline -->
+	<div class="rounded-lg border bg-background p-8">
+		<h2 class="text-lg font-semibold mb-6">Tracking history</h2>
+
+		<div class="space-y-6">
+			{#each trackingSteps as step, idx}
+				<div class="flex gap-4">
+					<!-- Timeline Marker -->
+					<div class="flex flex-col items-center">
+						<div
+							class={cn(
+								'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
+								step.completed
+									? 'bg-green-100 text-green-600'
+									: idx === 4
+										? 'bg-blue-100 text-blue-600'
+										: 'bg-gray-100 text-gray-400'
+							)}
+						>
+							{#if step.completed}
+								<span class="text-green-600">{@html CheckIcon()}</span>
+							{:else}
+								<span class="text-lg">•</span>
+							{/if}
+						</div>
+
+						<!-- Connecting Line -->
+						{#if idx < trackingSteps.length - 1}
+							<div
+								class={cn(
+									'w-0.5 h-24 my-2',
+									step.completed ? 'bg-green-200' : 'bg-gray-200'
+								)}
+							></div>
+						{/if}
+					</div>
+
+					<!-- Content -->
+					<div class="flex-1 pt-1">
+						<p class="font-semibold">{step.title}</p>
+						<p class="text-sm text-muted-foreground">{step.location}</p>
+						<p class="text-xs text-muted-foreground mt-1">{step.date}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Additional Info -->
+	<div class="rounded-lg bg-blue-50 border border-blue-200 p-6">
+		<p class="text-sm text-blue-900">
+			<span class="font-semibold">Note:</span> Tracking information is updated periodically. Refresh this page for the latest updates.
+		</p>
+	</div>
+
+	<!-- Action Button -->
+	<Button variant="outline" class="w-full">
+		View full order details
+	</Button>
+</div>

package/src/registry/blocks/order-history/index.ts

@@ -0,0 +1,3 @@
+export { default as OrderHistory01 } from './OrderHistory01.svelte';
+export { default as OrderHistory02 } from './OrderHistory02.svelte';
+export { default as OrderHistory03 } from './OrderHistory03.svelte';

package/src/registry/blocks/page-header/PageHeader01.svelte

@@ -0,0 +1,39 @@
+<!--
+  PageHeader01.svelte
+  Minimal two-slot horizontal layout: wide left slot + narrow right slot.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    left,
+    right
+  }: {
+    class?: string;
+    left?: Snippet;
+    right?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('flex items-start gap-4 py-4', className)}>
+  <div class="flex-1">
+    {#if left}
+      {@render left()}
+    {:else}
+      <div class="flex min-h-14 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+  <div class="w-56 shrink-0">
+    {#if right}
+      {@render right()}
+    {:else}
+      <div class="flex min-h-14 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+</div>

package/src/registry/blocks/page-header/PageHeader02.svelte

@@ -0,0 +1,58 @@
+<!--
+  PageHeader02.svelte
+  Breadcrumb + title + description left, Share/View/Edit/Publish actions right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    breadcrumbs = [{ label: 'Home', href: '#' }, { label: 'Settings', href: '#' }, { label: 'Profile details' }],
+    title = 'Project alpha',
+    description = "Manage your project's details such as name, image, description and settings.",
+    onshare = () => {},
+    onview = () => {},
+    onedit = () => {},
+    onpublish = () => {}
+  }: {
+    class?: string;
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    title?: string;
+    description?: string;
+    onshare?: () => void;
+    onview?: () => void;
+    onedit?: () => void;
+    onpublish?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('py-4', className)}>
+  <!-- Breadcrumb -->
+  <nav class="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
+    {#each breadcrumbs as crumb, i}
+      {#if i > 0}
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      {/if}
+      {#if crumb.href && i < breadcrumbs.length - 1}
+        <a href={crumb.href} class="hover:text-foreground">{crumb.label}</a>
+      {:else}
+        <span class={i === breadcrumbs.length - 1 ? 'font-medium text-foreground' : ''}>{crumb.label}</span>
+      {/if}
+    {/each}
+  </nav>
+
+  <!-- Header row -->
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold">{title}</h1>
+      {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      <Button variant="outline" size="sm" onclick={onshare}>Share</Button>
+      <Button variant="outline" size="sm" onclick={onview}>View</Button>
+      <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      <Button size="sm" onclick={onpublish}>Publish</Button>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/page-header/PageHeader03.svelte

@@ -0,0 +1,64 @@
+<!--
+  PageHeader03.svelte
+  Tabs row above + title + description left + Share/View/Edit/Publish right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    tabs = ['Profile', 'Reports', 'Analytics', 'Notifications', 'Help Center'],
+    activeTab = 'Profile',
+    title = 'Project alpha',
+    description = 'Manage your profile details such as name, avatar, email and bio.',
+    onshare = () => {},
+    onview = () => {},
+    onedit = () => {},
+    onpublish = () => {}
+  }: {
+    class?: string;
+    tabs?: string[];
+    activeTab?: string;
+    title?: string;
+    description?: string;
+    onshare?: () => void;
+    onview?: () => void;
+    onedit?: () => void;
+    onpublish?: () => void;
+  } = $props();
+
+  let currentTab = $state(activeTab);
+</script>
+
+<div class={cn('', className)}>
+  <!-- Tabs -->
+  <div class="flex gap-0 overflow-x-auto border-b">
+    {#each tabs as tab}
+      <button
+        type="button"
+        onclick={() => (currentTab = tab)}
+        class={cn(
+          'shrink-0 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors',
+          currentTab === tab
+            ? 'border-foreground text-foreground'
+            : 'border-transparent text-muted-foreground hover:text-foreground'
+        )}
+      >{tab}</button>
+    {/each}
+  </div>
+
+  <!-- Header row -->
+  <div class="flex flex-col gap-4 pt-6 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <h1 class="text-2xl font-bold">{title}</h1>
+      {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      <Button variant="outline" size="sm" onclick={onshare}>Share</Button>
+      <Button variant="outline" size="sm" onclick={onview}>View</Button>
+      <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      <Button size="sm" onclick={onpublish}>Publish</Button>
+    </div>
+  </div>
+</div>