@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/product-card/ProductCard02.svelte

@@ -0,0 +1,108 @@
+<!--
+  ProductCard02.svelte
+  Product card with badge, wishlist, and discounted pricing.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    category = 'Electronics',
+    name = 'Classic Oxford Shirt',
+    rating = 4.8,
+    reviewCount = 256,
+    originalPrice = '$79.99',
+    salePrice = '$49.99',
+    badge = 'Sale',
+    isWishlisted = false,
+    onAddToCart = () => {},
+    onToggleWishlist = () => {}
+  }: {
+    class?: string;
+    category?: string;
+    name?: string;
+    rating?: number;
+    reviewCount?: number;
+    originalPrice?: string;
+    salePrice?: string;
+    badge?: string;
+    isWishlisted?: boolean;
+    onAddToCart?: () => void;
+    onToggleWishlist?: () => void;
+  } = $props();
+
+  let wishlisted = $state(isWishlisted);
+
+  function handleWishlist() {
+    wishlisted = !wishlisted;
+    onToggleWishlist();
+  }
+
+  function renderStars(rate: number) {
+    const stars = [];
+    for (let i = 1; i <= 5; i++) {
+      const isFilled = i <= Math.floor(rate);
+      stars.push({ isFilled });
+    }
+    return stars;
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background overflow-hidden relative', className)}>
+  <!-- Badge overlay -->
+  {#if badge}
+    <div class="absolute top-3 left-3 z-10 bg-red-500 text-white px-2.5 py-1 rounded-md text-xs font-semibold">
+      {badge}
+    </div>
+  {/if}
+
+  <!-- Wishlist button -->
+  <button
+    onclick={handleWishlist}
+    class="absolute top-3 right-3 z-10 h-8 w-8 rounded-full bg-white shadow hover:bg-gray-50 flex items-center justify-center transition-colors"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill={wishlisted ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class={wishlisted ? 'text-red-500 fill-red-500' : 'text-gray-600'}>
+      <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>
+  </button>
+
+  <!-- Image placeholder -->
+  <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
+    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+      <circle cx="8.5" cy="8.5" r="1.5"/>
+      <polyline points="21 15 16 10 5 21"/>
+    </svg>
+  </div>
+
+  <!-- Content -->
+  <div class="p-4">
+    <!-- Category -->
+    <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">{category}</p>
+
+    <!-- Name -->
+    <h3 class="mt-2 font-semibold text-sm line-clamp-2">{name}</h3>
+
+    <!-- Rating -->
+    <div class="mt-2 flex items-center gap-1">
+      <div class="flex gap-0.5">
+        {#each renderStars(rating) as star}
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill={star.isFilled ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class={star.isFilled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}>
+            <polygon points="12 2 15.09 10.26 24 10.35 17.77 16.01 19.85 24.29 12 18.77 4.15 24.29 6.23 16.01 0 10.35 8.91 10.26"/>
+          </svg>
+        {/each}
+      </div>
+      <span class="text-xs text-muted-foreground">{rating} ({reviewCount})</span>
+    </div>
+
+    <!-- Price -->
+    <div class="mt-3 flex items-center gap-2">
+      <p class="text-lg font-bold">{salePrice}</p>
+      <p class="text-sm text-muted-foreground line-through">{originalPrice}</p>
+    </div>
+
+    <!-- Button -->
+    <Button onclick={onAddToCart} class="mt-4 w-full">Add to cart</Button>
+  </div>
+</div>

package/src/registry/blocks/product-card/ProductCard03.svelte

@@ -0,0 +1,80 @@
+<!--
+  ProductCard03.svelte
+  Horizontal product card layout for list views.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    category = 'Fashion',
+    name = 'Premium Linen Blazer',
+    rating = 4.6,
+    reviewCount = 92,
+    description = 'High-quality linen blend with classic tailoring.',
+    price = '$129.00',
+    onAddToCart = () => {}
+  }: {
+    class?: string;
+    category?: string;
+    name?: string;
+    rating?: number;
+    reviewCount?: number;
+    description?: string;
+    price?: string;
+    onAddToCart?: () => void;
+  } = $props();
+
+  function renderStars(rate: number) {
+    const stars = [];
+    for (let i = 1; i <= 5; i++) {
+      const isFilled = i <= Math.floor(rate);
+      stars.push({ isFilled });
+    }
+    return stars;
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background overflow-hidden', className)}>
+  <div class="flex flex-col sm:flex-row gap-4 p-4">
+    <!-- Image -->
+    <div class="shrink-0 w-full sm:w-24 aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
+      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+        <circle cx="8.5" cy="8.5" r="1.5"/>
+        <polyline points="21 15 16 10 5 21"/>
+      </svg>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 flex flex-col">
+      <!-- Category & Name -->
+      <div>
+        <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">{category}</p>
+        <h3 class="mt-1 font-semibold">{name}</h3>
+      </div>
+
+      <!-- Rating -->
+      <div class="mt-2 flex items-center gap-1">
+        <div class="flex gap-0.5">
+          {#each renderStars(rating) as star}
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill={star.isFilled ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class={star.isFilled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}>
+              <polygon points="12 2 15.09 10.26 24 10.35 17.77 16.01 19.85 24.29 12 18.77 4.15 24.29 6.23 16.01 0 10.35 8.91 10.26"/>
+            </svg>
+          {/each}
+        </div>
+        <span class="text-xs text-muted-foreground">{rating} ({reviewCount})</span>
+      </div>
+
+      <!-- Description -->
+      <p class="mt-2 text-sm text-muted-foreground line-clamp-2">{description}</p>
+
+      <!-- Price & Button -->
+      <div class="mt-3 flex items-center gap-3">
+        <p class="text-lg font-bold">{price}</p>
+        <Button size="sm" onclick={onAddToCart}>Add to cart</Button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/product-card/ProductCard04.svelte

@@ -0,0 +1,50 @@
+<!--
+  ProductCard04.svelte
+  Minimal product card with hover effect showing quick add button.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    name = 'Ceramic Coffee Mug',
+    price = '$24.99',
+    onQuickAdd = () => {}
+  }: {
+    class?: string;
+    name?: string;
+    price?: string;
+    onQuickAdd?: () => void;
+  } = $props();
+
+  let isHovering = $state(false);
+</script>
+
+<div
+  class={cn('rounded-lg overflow-hidden bg-background', className)}
+  onmouseenter={() => (isHovering = true)}
+  onmouseleave={() => (isHovering = false)}
+>
+  <!-- Image container -->
+  <div class="relative aspect-square bg-gray-100 rounded-lg flex items-center justify-center overflow-hidden">
+    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+      <circle cx="8.5" cy="8.5" r="1.5"/>
+      <polyline points="21 15 16 10 5 21"/>
+    </svg>
+
+    <!-- Hover overlay button -->
+    {#if isHovering}
+      <div class="absolute inset-0 bg-black/50 flex items-end justify-center p-4 animate-in fade-in">
+        <Button onclick={onQuickAdd} variant="secondary" class="w-full">Quick add</Button>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Content -->
+  <div class="p-3">
+    <h3 class="font-semibold text-sm line-clamp-1">{name}</h3>
+    <p class="mt-2 text-lg font-bold">{price}</p>
+  </div>
+</div>

package/src/registry/blocks/product-card/ProductCard05.svelte

@@ -0,0 +1,107 @@
+<!--
+  ProductCard05.svelte
+  Product card with color swatches selection.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface ColorOption {
+    name: string;
+    value: string;
+  }
+
+  let {
+    class: className = '',
+    category = 'Fashion',
+    name = 'Cashmere Sweater',
+    rating = 4.9,
+    reviewCount = 312,
+    price = '$199.00',
+    colors = [
+      { name: 'Black', value: '#000000' },
+      { name: 'Navy', value: '#1e3a8a' },
+      { name: 'Cream', value: '#fffdd0' },
+      { name: 'Gray', value: '#808080' }
+    ] as ColorOption[],
+    onAddToCart = () => {}
+  }: {
+    class?: string;
+    category?: string;
+    name?: string;
+    rating?: number;
+    reviewCount?: number;
+    price?: string;
+    colors?: ColorOption[];
+    onAddToCart?: () => void;
+  } = $props();
+
+  let selectedColor = $state(colors[0]);
+
+  function renderStars(rate: number) {
+    const stars = [];
+    for (let i = 1; i <= 5; i++) {
+      const isFilled = i <= Math.floor(rate);
+      stars.push({ isFilled });
+    }
+    return stars;
+  }
+</script>
+
+<div class={cn('rounded-lg border bg-background overflow-hidden', className)}>
+  <!-- Image placeholder -->
+  <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
+    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+      <circle cx="8.5" cy="8.5" r="1.5"/>
+      <polyline points="21 15 16 10 5 21"/>
+    </svg>
+  </div>
+
+  <!-- Content -->
+  <div class="p-4">
+    <!-- Category -->
+    <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">{category}</p>
+
+    <!-- Name -->
+    <h3 class="mt-2 font-semibold text-sm line-clamp-2">{name}</h3>
+
+    <!-- Rating -->
+    <div class="mt-2 flex items-center gap-1">
+      <div class="flex gap-0.5">
+        {#each renderStars(rating) as star}
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill={star.isFilled ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class={star.isFilled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}>
+            <polygon points="12 2 15.09 10.26 24 10.35 17.77 16.01 19.85 24.29 12 18.77 4.15 24.29 6.23 16.01 0 10.35 8.91 10.26"/>
+          </svg>
+        {/each}
+      </div>
+      <span class="text-xs text-muted-foreground">{rating} ({reviewCount})</span>
+    </div>
+
+    <!-- Color swatches -->
+    <div class="mt-3">
+      <p class="text-xs font-medium text-foreground mb-2">Color: {selectedColor.name}</p>
+      <div class="flex gap-2">
+        {#each colors as color (color.value)}
+          <button
+            onclick={() => (selectedColor = color)}
+            class={cn(
+              'h-6 w-6 rounded-full border-2 transition-all',
+              selectedColor.value === color.value
+                ? 'border-foreground ring-2 ring-offset-1 ring-foreground'
+                : 'border-gray-300 hover:border-gray-400'
+            )}
+            style={`background-color: ${color.value}`}
+            title={color.name}
+          />
+        {/each}
+      </div>
+    </div>
+
+    <!-- Price -->
+    <p class="mt-3 text-lg font-bold">{price}</p>
+
+    <!-- Button -->
+    <Button onclick={onAddToCart} class="mt-4 w-full">Add to cart</Button>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+export { default as ProductCard01 } from './ProductCard01.svelte';
+export { default as ProductCard02 } from './ProductCard02.svelte';
+export { default as ProductCard03 } from './ProductCard03.svelte';
+export { default as ProductCard04 } from './ProductCard04.svelte';
+export { default as ProductCard05 } from './ProductCard05.svelte';

package/src/registry/blocks/product-detail/ProductDetail01.svelte

@@ -0,0 +1,174 @@
+<!--
+  ProductDetail01.svelte
+  Standard 2-column product detail with image gallery and options.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    breadcrumb = ['Home', 'Electronics', 'Headphones'],
+    name = 'Premium Wireless Headphones',
+    rating = 4.7,
+    reviewCount = 543,
+    price = '$349.99',
+    description = 'High-quality wireless headphones with active noise cancellation, 30-hour battery life, and premium sound quality.',
+    sizes = ['S', 'M', 'L', 'XL'],
+    onAddToCart = () => {},
+    onSave = () => {}
+  }: {
+    class?: string;
+    breadcrumb?: string[];
+    name?: string;
+    rating?: number;
+    reviewCount?: number;
+    price?: string;
+    description?: string;
+    sizes?: string[];
+    onAddToCart?: () => void;
+    onSave?: () => void;
+  } = $props();
+
+  let activeImageIndex = $state(0);
+  let selectedSize = $state(sizes[1]);
+  let quantity = $state(1);
+
+  const thumbnails = [0, 1, 2, 3];
+
+  function renderStars(rate: number) {
+    const stars = [];
+    for (let i = 1; i <= 5; i++) {
+      const isFilled = i <= Math.floor(rate);
+      stars.push({ isFilled });
+    }
+    return stars;
+  }
+
+  function incrementQuantity() {
+    quantity += 1;
+  }
+
+  function decrementQuantity() {
+    if (quantity > 1) quantity -= 1;
+  }
+</script>
+
+<div class={cn('grid grid-cols-1 md:grid-cols-2 gap-8', className)}>
+  <!-- Left: Image Gallery -->
+  <div>
+    <!-- Main image -->
+    <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center mb-4">
+      <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+        <circle cx="8.5" cy="8.5" r="1.5"/>
+        <polyline points="21 15 16 10 5 21"/>
+      </svg>
+    </div>
+
+    <!-- Thumbnails -->
+    <div class="flex gap-2">
+      {#each thumbnails as thumb, idx}
+        <button
+          onclick={() => (activeImageIndex = idx)}
+          class={cn(
+            'h-16 w-16 rounded-md border-2 bg-gray-100 flex items-center justify-center transition-all',
+            activeImageIndex === idx ? 'border-foreground' : 'border-gray-200'
+          )}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+            <circle cx="8.5" cy="8.5" r="1.5"/>
+            <polyline points="21 15 16 10 5 21"/>
+          </svg>
+        </button>
+      {/each}
+    </div>
+  </div>
+
+  <!-- Right: Details -->
+  <div>
+    <!-- Breadcrumb -->
+    <nav class="flex items-center gap-2 text-xs text-muted-foreground mb-4">
+      {#each breadcrumb as item, idx}
+        <span>{item}</span>
+        {#if idx < breadcrumb.length - 1}
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 18 15 12 9 6"/>
+          </svg>
+        {/if}
+      {/each}
+    </nav>
+
+    <!-- Name -->
+    <h1 class="text-2xl md:text-3xl font-bold">{name}</h1>
+
+    <!-- Rating -->
+    <div class="mt-3 flex items-center gap-2">
+      <div class="flex gap-0.5">
+        {#each renderStars(rating) as star}
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill={star.isFilled ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2" class={star.isFilled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300'}>
+            <polygon points="12 2 15.09 10.26 24 10.35 17.77 16.01 19.85 24.29 12 18.77 4.15 24.29 6.23 16.01 0 10.35 8.91 10.26"/>
+          </svg>
+        {/each}
+      </div>
+      <span class="text-sm font-medium">{rating}</span>
+      <span class="text-sm text-muted-foreground">({reviewCount} reviews)</span>
+    </div>
+
+    <!-- Price -->
+    <p class="mt-4 text-3xl font-bold">{price}</p>
+
+    <!-- Description -->
+    <p class="mt-4 text-muted-foreground leading-relaxed">{description}</p>
+
+    <!-- Size Selector -->
+    <div class="mt-6">
+      <p class="text-sm font-semibold mb-3">Size</p>
+      <div class="flex gap-2">
+        {#each sizes as size}
+          <button
+            onclick={() => (selectedSize = size)}
+            class={cn(
+              'px-4 py-2 rounded-md border-2 font-medium transition-all',
+              selectedSize === size
+                ? 'border-foreground bg-foreground text-background'
+                : 'border-gray-200 hover:border-gray-300'
+            )}
+          >
+            {size}
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Quantity Stepper -->
+    <div class="mt-6">
+      <p class="text-sm font-semibold mb-3">Quantity</p>
+      <div class="flex items-center gap-2 border rounded-md w-fit">
+        <button onclick={decrementQuantity} class="px-3 py-2 hover:bg-gray-100">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+        </button>
+        <span class="px-4 font-medium">{quantity}</span>
+        <button onclick={incrementQuantity} class="px-3 py-2 hover:bg-gray-100">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="12" y1="5" x2="12" y2="19"/>
+            <line x1="5" y1="12" x2="19" y2="12"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="mt-8 flex gap-3">
+      <Button onclick={onAddToCart} class="flex-1">Add to cart</Button>
+      <Button onclick={onSave} variant="outline" class="px-4">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <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>
+      </Button>
+    </div>
+  </div>
+</div>