@xbg.solutions/create-frontend 1.1.1 → 1.2.0

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

@@ -0,0 +1,170 @@
+<!--
+  ProductDetail02.svelte
+  Product detail with tabbed content (Description, Specifications, Reviews).
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  interface ColorOption {
+    name: string;
+    value: string;
+  }
+
+  let {
+    class: className = '',
+    name = 'Professional Camera',
+    price = '$1,299.00',
+    rating = 4.8,
+    colors = [
+      { name: 'Black', value: '#000000' },
+      { name: 'Silver', value: '#c0c0c0' }
+    ] as ColorOption[],
+    sizes = ['24MP', '45MP'],
+    description = 'Professional full-frame mirrorless camera with advanced autofocus system.',
+    specifications = [
+      { label: 'Sensor', value: 'Full-frame CMOS' },
+      { label: 'Resolution', value: '45.7 MP' },
+      { label: 'ISO Range', value: '100–32000' },
+      { label: 'Video', value: '8K 24fps' }
+    ],
+    onAddToCart = () => {}
+  }: {
+    class?: string;
+    name?: string;
+    price?: string;
+    rating?: number;
+    colors?: ColorOption[];
+    sizes?: string[];
+    description?: string;
+    specifications?: { label: string; value: string }[];
+    onAddToCart?: () => void;
+  } = $props();
+
+  let selectedColor = $state(colors[0]);
+  let selectedSize = $state(sizes[0]);
+  let activeTab = $state<'description' | 'specifications' | 'reviews'>('description');
+
+  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('space-y-8', className)}>
+  <!-- Top Section: Image + Options -->
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+    <!-- Left: Image -->
+    <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
+      <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>
+
+    <!-- Right: Details & Options -->
+    <div class="space-y-6">
+      <!-- Name & Price -->
+      <div>
+        <h1 class="text-2xl md:text-3xl font-bold">{name}</h1>
+        <div class="mt-2 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="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-sm font-medium">{rating}</span>
+        </div>
+        <p class="mt-3 text-3xl font-bold">{price}</p>
+      </div>
+
+      <!-- Color Selector -->
+      <div>
+        <p class="text-sm font-semibold mb-2">Color: {selectedColor.name}</p>
+        <div class="flex gap-3">
+          {#each colors as color}
+            <button
+              onclick={() => (selectedColor = color)}
+              class={cn(
+                'h-8 w-8 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>
+
+      <!-- Size Selector -->
+      <div>
+        <p class="text-sm font-semibold mb-2">Model: {selectedSize}</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>
+
+      <!-- Add to Cart -->
+      <Button onclick={onAddToCart} class="w-full">Add to cart</Button>
+    </div>
+  </div>
+
+  <!-- Tabs Section -->
+  <div class="border-t pt-8">
+    <!-- Tab buttons -->
+    <div class="flex gap-6 border-b mb-6">
+      {#each ['description', 'specifications', 'reviews'] as tab}
+        <button
+          onclick={() => (activeTab = tab as typeof activeTab)}
+          class={cn(
+            'pb-3 font-medium transition-colors capitalize',
+            activeTab === tab ? 'border-b-2 border-foreground text-foreground' : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          {tab}
+        </button>
+      {/each}
+    </div>
+
+    <!-- Tab content -->
+    {#if activeTab === 'description'}
+      <div class="prose prose-sm max-w-none">
+        <p class="text-muted-foreground leading-relaxed">{description}</p>
+      </div>
+    {:else if activeTab === 'specifications'}
+      <div class="space-y-3">
+        {#each specifications as spec}
+          <div class="flex items-center justify-between border-b pb-3 last:border-b-0">
+            <span class="font-medium text-sm">{spec.label}</span>
+            <span class="text-muted-foreground text-sm">{spec.value}</span>
+          </div>
+        {/each}
+      </div>
+    {:else if activeTab === 'reviews'}
+      <div class="text-center py-8">
+        <p class="text-muted-foreground">No reviews yet. Be the first to review this product.</p>
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,159 @@
+<!--
+  ProductDetail03.svelte
+  Minimal full-width product detail layout.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    name = 'Luxury Watch',
+    rating = 4.9,
+    price = '$899.00',
+    description = 'Handcrafted luxury timepiece with Swiss movement and premium leather strap. Water-resistant up to 100m.',
+    sizes = ['38mm', '42mm'],
+    colors = ['Gold', 'Silver', 'Rose Gold'],
+    onAddToCart = () => {}
+  }: {
+    class?: string;
+    name?: string;
+    rating?: number;
+    price?: string;
+    description?: string;
+    sizes?: string[];
+    colors?: string[];
+    onAddToCart?: () => void;
+  } = $props();
+
+  let selectedSize = $state(sizes[0]);
+  let selectedColor = $state(colors[0]);
+  let quantity = $state(1);
+
+  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('space-y-8', className)}>
+  <!-- Full-width image at top -->
+  <div class="w-full aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" 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>
+
+  <!-- 3-column layout -->
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+    <!-- Left: Description -->
+    <div class="space-y-4">
+      <div>
+        <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-2">Description</h2>
+        <p class="text-sm leading-relaxed text-foreground">{description}</p>
+      </div>
+    </div>
+
+    <!-- Center: Options & Price -->
+    <div class="space-y-6">
+      <div>
+        <h1 class="text-2xl font-bold">{name}</h1>
+        <div class="mt-2 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>
+        </div>
+      </div>
+
+      <!-- Size -->
+      <div>
+        <p class="text-xs font-semibold text-muted-foreground mb-2 uppercase">Size</p>
+        <div class="flex gap-2">
+          {#each sizes as size}
+            <button
+              onclick={() => (selectedSize = size)}
+              class={cn(
+                'px-3 py-2 rounded-md border text-sm font-medium transition-all',
+                selectedSize === size
+                  ? 'border-foreground bg-foreground text-background'
+                  : 'border-gray-200 hover:border-gray-300'
+              )}
+            >
+              {size}
+            </button>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Color -->
+      <div>
+        <p class="text-xs font-semibold text-muted-foreground mb-2 uppercase">Color</p>
+        <div class="flex gap-2">
+          {#each colors as color}
+            <button
+              onclick={() => (selectedColor = color)}
+              class={cn(
+                'px-3 py-2 rounded-md border text-sm font-medium transition-all',
+                selectedColor === color
+                  ? 'border-foreground bg-foreground text-background'
+                  : 'border-gray-200 hover:border-gray-300'
+              )}
+            >
+              {color}
+            </button>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Price -->
+      <p class="text-3xl font-bold">{price}</p>
+    </div>
+
+    <!-- Right: Actions -->
+    <div class="space-y-4">
+      <!-- Quantity -->
+      <div>
+        <p class="text-xs font-semibold text-muted-foreground mb-2 uppercase">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="14" height="14" 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-3 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="14" height="14" 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>
+
+      <!-- Buttons -->
+      <div class="space-y-2">
+        <Button onclick={onAddToCart} class="w-full">Add to cart</Button>
+        <Button variant="outline" class="w-full">View reviews</Button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,106 @@
+<!--
+  ProductDetail04.svelte
+  Dark-themed product detail layout.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    name = 'Premium Leather Backpack',
+    price = '$249.99',
+    rating = 4.6,
+    description = 'Handcrafted Italian leather backpack with laptop compartment, ergonomic straps, and lifetime warranty.',
+    capacity = '25L',
+    weight = '2.2 lbs',
+    material = '100% Full Grain Leather',
+    onAddToCart = () => {},
+    onViewDetails = () => {}
+  }: {
+    class?: string;
+    name?: string;
+    price?: string;
+    rating?: number;
+    description?: string;
+    capacity?: string;
+    weight?: string;
+    material?: string;
+    onAddToCart?: () => void;
+    onViewDetails?: () => 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('bg-gray-950 text-white rounded-lg overflow-hidden', className)}>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 p-8 md:p-12">
+    <!-- Left: Image -->
+    <div class="aspect-square bg-gray-900 rounded-lg flex items-center justify-center">
+      <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-700">
+        <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>
+
+    <!-- Right: Content -->
+    <div class="flex flex-col justify-between">
+      <!-- Header -->
+      <div>
+        <h1 class="text-3xl md:text-4xl 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-600'}>
+                <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>
+        </div>
+
+        <!-- Price -->
+        <p class="mt-6 text-4xl font-bold">{price}</p>
+
+        <!-- Description -->
+        <p class="mt-4 text-gray-300 leading-relaxed">{description}</p>
+
+        <!-- Specs -->
+        <div class="mt-6 space-y-2 text-sm">
+          <div class="flex justify-between">
+            <span class="text-gray-400">Capacity</span>
+            <span class="font-medium">{capacity}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Weight</span>
+            <span class="font-medium">{weight}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-400">Material</span>
+            <span class="font-medium">{material}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Buttons -->
+      <div class="mt-8 flex gap-3">
+        <Button onclick={onAddToCart} class="flex-1 bg-white text-black hover:bg-gray-100">
+          Add to cart
+        </Button>
+        <Button onclick={onViewDetails} variant="outline" class="border-white text-white hover:bg-gray-900">
+          View details
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,181 @@
+<!--
+  ProductDetail05.svelte
+  Product detail with sticky sidebar for price and CTA.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    name = 'Ultra HD Monitor',
+    price = '$599.99',
+    rating = 4.8,
+    description = 'Revolutionary ultra-high definition 32" monitor with 144Hz refresh rate and exceptional color accuracy.',
+    specifications = [
+      { label: 'Resolution', value: '4K (3840 x 2160)' },
+      { label: 'Refresh Rate', value: '144Hz' },
+      { label: 'Panel Type', value: 'IPS' },
+      { label: 'Brightness', value: '400 nits' },
+      { label: 'Response Time', value: '1ms' },
+      { label: 'Input Ports', value: 'HDMI 2.1, DisplayPort' }
+    ],
+    reviews = [
+      { author: 'John D.', rating: 5, text: 'Incredible color accuracy. Best monitor I have ever used!' },
+      { author: 'Sarah M.', rating: 4, text: 'Great performance but gets expensive. Worth the investment.' }
+    ],
+    onAddToCart = () => {},
+    onAddToWishlist = () => {}
+  }: {
+    class?: string;
+    name?: string;
+    price?: string;
+    rating?: number;
+    description?: string;
+    specifications?: { label: string; value: string }[];
+    reviews?: { author: string; rating: number; text: string }[];
+    onAddToCart?: () => void;
+    onAddToWishlist?: () => void;
+  } = $props();
+
+  let quantity = $state(1);
+  let isWishlisted = $state(false);
+
+  function incrementQuantity() {
+    quantity += 1;
+  }
+
+  function decrementQuantity() {
+    if (quantity > 1) quantity -= 1;
+  }
+
+  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('grid grid-cols-1 lg:grid-cols-3 gap-8', className)}>
+  <!-- Left: Scrollable content (2/3 width) -->
+  <div class="lg:col-span-2 space-y-8">
+    <!-- Image Gallery -->
+    <div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
+      <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>
+
+    <!-- Description -->
+    <section>
+      <h2 class="text-xl font-semibold mb-3">About this product</h2>
+      <p class="text-muted-foreground leading-relaxed">{description}</p>
+    </section>
+
+    <!-- Specifications -->
+    <section>
+      <h2 class="text-xl font-semibold mb-4">Specifications</h2>
+      <div class="border rounded-lg divide-y">
+        {#each specifications as spec}
+          <div class="flex items-center justify-between p-4">
+            <span class="font-medium text-sm">{spec.label}</span>
+            <span class="text-muted-foreground text-sm">{spec.value}</span>
+          </div>
+        {/each}
+      </div>
+    </section>
+
+    <!-- Reviews -->
+    <section>
+      <h2 class="text-xl font-semibold mb-4">Customer Reviews</h2>
+      <div class="space-y-4">
+        {#each reviews as review}
+          <div class="border rounded-lg p-4">
+            <div class="flex items-center justify-between mb-2">
+              <p class="font-semibold text-sm">{review.author}</p>
+              <div class="flex gap-0.5">
+                {#each renderStars(review.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>
+            </div>
+            <p class="text-sm text-muted-foreground">{review.text}</p>
+          </div>
+        {/each}
+      </div>
+    </section>
+  </div>
+
+  <!-- Right: Sticky sidebar (1/3 width) -->
+  <div class="lg:col-span-1">
+    <div class="sticky top-6 space-y-6 border rounded-lg p-6 bg-background">
+      <!-- Header -->
+      <div>
+        <h1 class="text-2xl font-bold">{name}</h1>
+        <div class="mt-2 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="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-sm font-medium">{rating}</span>
+        </div>
+      </div>
+
+      <!-- Price -->
+      <div class="border-t pt-4">
+        <p class="text-3xl font-bold">{price}</p>
+      </div>
+
+      <!-- Quantity Selector -->
+      <div class="space-y-2">
+        <p class="text-sm font-semibold">Quantity</p>
+        <div class="flex items-center gap-2 border rounded-md">
+          <button onclick={decrementQuantity} class="px-3 py-2 hover:bg-gray-100">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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="flex-1 text-center 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="14" height="14" 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>
+
+      <!-- CTA Buttons -->
+      <div class="space-y-2 pt-2">
+        <Button onclick={onAddToCart} class="w-full">Add to cart</Button>
+        <button
+          onclick={() => {
+            isWishlisted = !isWishlisted;
+            onAddToWishlist();
+          }}
+          class={cn(
+            'w-full flex items-center justify-center gap-2 px-4 py-2 rounded-md border transition-colors',
+            isWishlisted
+              ? 'bg-red-50 border-red-200 text-red-600 hover:bg-red-100'
+              : 'border-gray-200 text-muted-foreground hover:border-gray-300'
+          )}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill={isWishlisted ? 'currentColor' : '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>
+          {isWishlisted ? 'Saved' : 'Save for later'}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+export { default as ProductDetail01 } from './ProductDetail01.svelte';
+export { default as ProductDetail02 } from './ProductDetail02.svelte';
+export { default as ProductDetail03 } from './ProductDetail03.svelte';
+export { default as ProductDetail04 } from './ProductDetail04.svelte';
+export { default as ProductDetail05 } from './ProductDetail05.svelte';