jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/ecommerce/product-detail-3/render.jsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Star, Minus, Plus, ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import Link from "next/link";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
+
+export default function ProductDetail() {
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [selectedVariant, setSelectedVariant] = useState("Black");
+  const [quantity, setQuantity] = useState(1);
+  const [openSections, setOpenSections] = useState({
+    details: false,
+    shipping: false,
+    returns: false,
+  });
+
+  const images = [
+    "/images/products/01.jpeg",
+    "/images/products/02.jpeg",
+    "/images/products/03.jpeg",
+  ];
+
+  const toggleSection = (section: keyof typeof openSections) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }));
+  };
+
+  const incrementQuantity = () => setQuantity((prev) => prev + 1);
+  const decrementQuantity = () => setQuantity((prev) => Math.max(1, prev - 1));
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-6">
+      <Breadcrumb className="mb-8">
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href="#" prefetch={false}>
+                Shop all
+              </Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href="#" prefetch={false}>
+                Clothing
+              </Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Classic Cotton T-Shirt</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+        <div className="flex flex-col gap-4 lg:flex-row">
+          <div className="relative aspect-square h-130 w-full overflow-hidden rounded-lg border">
+            <Image
+              src={images[selectedImage]}
+              fill
+              className="h-full w-full object-cover"
+              alt="..."
+              unoptimized
+            />
+          </div>
+
+          <div className="flex flex-wrap gap-4 lg:flex-col">
+            {images.map((image, index) => (
+              <Button
+                key={index}
+                variant="ghost"
+                onClick={() => setSelectedImage(index)}
+                className={`relative size-16 overflow-hidden rounded-lg p-0 lg:size-20 ${
+                  selectedImage === index ? "ring-2" : "ring-0"
+                }`}
+              >
+                <Image
+                  src={image}
+                  className="h-full w-full object-cover"
+                  fill
+                  alt="..."
+                  unoptimized
+                />
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div>
+            <h1 className="mb-2 text-3xl font-bold">Classic Cotton T-Shirt</h1>
+            <p className="text-muted-foreground mb-4 text-xl font-semibold">
+              $55
+            </p>
+
+            {/* Rating */}
+            <div className="mb-4 flex items-center gap-2">
+              <div className="flex items-center gap-1">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <Star
+                    key={star}
+                    className={`size-4 ${
+                      star <= 3
+                        ? "fill-yellow-400 text-yellow-400"
+                        : star === 4
+                          ? "fill-yellow-400/50 text-yellow-400"
+                          : "text-gray-300"
+                    }`}
+                  />
+                ))}
+              </div>
+              <Link
+                href="#"
+                className="text-muted-foreground hover:text-foreground text-sm hover:underline"
+              >
+                (3.5 stars) • 10 reviews
+              </Link>
+            </div>
+
+            {/* Description */}
+            <p className="text-muted-foreground leading-relaxed">
+              Made from 100% premium cotton, this classic t-shirt offers
+              exceptional comfort and durability. Features a relaxed fit,
+              reinforced seams, and pre-shrunk fabric. Perfect for everyday wear
+              or layering. The soft, breathable material keeps you comfortable
+              all day long.
+            </p>
+          </div>
+
+          {/* Variant Selection */}
+          <div className="space-y-4">
+            <div>
+              <label className="mb-2 block text-sm font-medium">Size</label>
+              <Select defaultValue="medium">
+                <SelectTrigger>
+                  <SelectValue placeholder="Select size" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="small">Small</SelectItem>
+                  <SelectItem value="medium">Medium</SelectItem>
+                  <SelectItem value="large">Large</SelectItem>
+                  <SelectItem value="xlarge">X-Large</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-900">
+                Color
+              </label>
+              <div className="flex gap-2">
+                {["Black", "White", "Navy"].map((option) => (
+                  <button
+                    key={option}
+                    onClick={() => setSelectedVariant(option)}
+                    className={`rounded-md border px-4 py-2 text-sm font-medium ${
+                      selectedVariant === option
+                        ? "border-primary bg-primary text-white dark:text-black"
+                        : "hover:bg-muted border"
+                    }`}
+                  >
+                    {option}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Quantity */}
+          <div>
+            <label className="mb-2 block text-sm font-medium">Quantity</label>
+            <InputGroup className="w-fit h-auto">
+              <InputGroupAddon align="inline-start">
+                <InputGroupButton
+                  size="icon-sm"
+                  onClick={decrementQuantity}
+                  disabled={quantity <= 1}
+                  aria-label="Decrease quantity"
+                >
+                  <Minus />
+                </InputGroupButton>
+              </InputGroupAddon>
+              <InputGroupInput
+                readOnly
+                tabIndex={-1}
+                value={String(quantity)}
+                aria-label="Quantity"
+                className="w-12 text-center"
+              />
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  size="icon-sm"
+                  onClick={incrementQuantity}
+                  aria-label="Increase quantity"
+                >
+                  <Plus />
+                </InputGroupButton>
+              </InputGroupAddon>
+            </InputGroup>
+          </div>
+
+          {/* Action Buttons */}
+          <div>
+            <div className="flex gap-2 space-y-3">
+              <Button className="grow">Add To Cart</Button>
+              <Button className="grow" variant="outline">
+                Buy Now
+              </Button>
+            </div>
+            <p className="text-muted-foreground text-center text-sm">
+              Free shipping over $50
+            </p>
+          </div>
+
+          {/* Collapsible Sections */}
+          <div className="space-y-4 pt-6">
+            <Collapsible
+              open={openSections.details}
+              onOpenChange={() => toggleSection("details")}
+            >
+              <CollapsibleTrigger className="flex w-full items-center justify-between py-3 text-left">
+                <span className="font-medium">Details</span>
+                <ChevronDown
+                  className={`h-5 w-5 transition-transform ${openSections.details ? "rotate-180" : ""}`}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="pb-3">
+                <div className="text-muted-foreground space-y-2 text-sm">
+                  <p>• 100% premium cotton construction</p>
+                  <p>• Pre-shrunk fabric to maintain fit</p>
+                  <p>• Reinforced shoulder seams for durability</p>
+                  <p>• Tagless label for comfort</p>
+                  <p>• Machine wash cold, tumble dry low</p>
+                  <p>• Available in sizes S-XL</p>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible
+              open={openSections.shipping}
+              onOpenChange={() => toggleSection("shipping")}
+            >
+              <CollapsibleTrigger className="flex w-full items-center justify-between border-t py-3 text-left">
+                <span className="font-medium">Shipping</span>
+                <ChevronDown
+                  className={`h-5 w-5 transition-transform ${openSections.shipping ? "rotate-180" : ""}`}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="pb-3">
+                <div className="text-muted-foreground space-y-2 text-sm">
+                  <p>• Free shipping on orders over $50</p>
+                  <p>• Standard shipping: 5-7 business days</p>
+                  <p>• Express shipping: 2-3 business days</p>
+                  <p>• International shipping available</p>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible
+              open={openSections.returns}
+              onOpenChange={() => toggleSection("returns")}
+            >
+              <CollapsibleTrigger className="flex w-full items-center justify-between border-t py-3 text-left">
+                <span className="font-medium">Returns</span>
+                <ChevronDown
+                  className={`h-5 w-5 transition-transform ${openSections.returns ? "rotate-180" : ""}`}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="pb-3">
+                <div className="text-muted-foreground space-y-2 text-sm">
+                  <p>• 30-day return policy</p>
+                  <p>• Items must be in original condition</p>
+                  <p>• Free return shipping for defective items</p>
+                  <p>• Refunds processed within 5-10 business days</p>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-detail-4/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/ecommerce/product-detail-4/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/ecommerce/product-detail-4/render.jsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Image from "next/image";
+import { ChevronDown, ShoppingBag } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+const product = {
+  category: "PERFUME",
+  name: "Ashes of Moonlight",
+  price: "$139.00",
+  intro:
+    "Step into the world of Parfs, where each bottle unveils a tale of bold elegance and understated strength designed for those who command presence without a word.",
+  volumes: ["100 ml", "70 ml", "50 ml"] as const,
+  characteristics: [
+    { label: "Brand", value: "PARFS" },
+    { label: "Collection", value: "2022" },
+    { label: "Item no", value: "04681745" },
+  ],
+  description: [
+    "A fragrance that captures the quiet power of moonlight on ash—smoky, luminous, and unforgettable. Blended with rare oud, iris, and musk, it leaves a lasting impression.",
+    "Designed for those who prefer subtle statement over loud declaration. Eau de Parfum concentration for lasting wear. 100 ml | 4 oz.",
+  ],
+  images: [
+    "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=800&q=80",
+    "https://images.unsplash.com/photo-1592945403244-b3fbafd7f539?w=800&q=80",
+    "https://images.unsplash.com/photo-1615634260167-c8cdede054de?w=800&q=80",
+    "https://images.unsplash.com/photo-1541643600914-78b084683601?w=800&q=80",
+    "https://images.unsplash.com/photo-1594035910387-fea47794261f?w=800&q=80",
+    "https://images.unsplash.com/photo-1595425970377-c9703cf48b6d?w=800&q=80",
+    "https://images.unsplash.com/photo-1619994121345-228e1f2957b3?w=800&q=80",
+  ],
+};
+
+export default function ProductDetail() {
+  const [api, setApi] = useState<CarouselApi>();
+  const [thumbApi, setThumbApi] = useState<CarouselApi>();
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [selectedVolume, setSelectedVolume] =
+    useState<(typeof product.volumes)[number]>("100 ml");
+  const [openSections, setOpenSections] = useState({
+    characteristics: true,
+    description: true,
+    payment: false,
+    returns: false,
+  });
+
+  useEffect(() => {
+    if (!api) return;
+    setSelectedImage(api.selectedScrollSnap());
+    api.on("select", () => setSelectedImage(api.selectedScrollSnap()));
+  }, [api]);
+
+  useEffect(() => {
+    thumbApi?.scrollTo(selectedImage);
+  }, [selectedImage, thumbApi]);
+
+  const toggleSection = (key: keyof typeof openSections) => {
+    setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-14 sm:px-6 sm:py-20 lg:px-8">
+      <div className="grid gap-4 lg:grid-cols-2 lg:gap-8">
+        <div className="space-y-4">
+          <Carousel setApi={setApi} className="w-full">
+            <CarouselContent>
+              {product.images.map((src, i) => (
+                <CarouselItem key={i}>
+                  <div className="bg-muted relative aspect-4/5 w-full overflow-hidden rounded-lg">
+                    <Image
+                      src={src}
+                      alt={`${product.name} ${i + 1}`}
+                      fill
+                      className="object-cover"
+                      unoptimized
+                    />
+                  </div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+            <CarouselPrevious className="left-2" />
+            <CarouselNext className="right-2" />
+          </Carousel>
+          <Carousel
+            setApi={setThumbApi}
+            opts={{ align: "start", containScroll: "trimSnaps" }}
+            className="w-full"
+          >
+            <CarouselContent>
+              {product.images.map((src, i) => (
+                <CarouselItem key={i} className="basis-1/5">
+                  <button
+                    type="button"
+                    onClick={() => api?.scrollTo(i)}
+                    className={cn(
+                      "relative aspect-square w-full overflow-hidden rounded-md border transition-opacity hover:opacity-90",
+                      selectedImage === i
+                        ? "ring-primary ring-2"
+                        : "border-transparent",
+                    )}
+                  >
+                    <Image
+                      src={src}
+                      alt=""
+                      fill
+                      className="object-cover"
+                      unoptimized
+                    />
+                  </button>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+          </Carousel>
+        </div>
+
+        <div className="flex flex-col space-y-4">
+          <Badge variant="outline">{product.category}</Badge>
+          <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
+            {product.name}
+          </h1>
+          <p className="text-lg">{product.price}</p>
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            {product.intro}
+          </p>
+
+          <div>
+            <p className="text-foreground mb-2 text-xs font-medium tracking-wider uppercase">
+              Volume:
+            </p>
+            <div className="flex gap-6">
+              {product.volumes.map((vol) => (
+                <button
+                  key={vol}
+                  type="button"
+                  onClick={() => setSelectedVolume(vol)}
+                  className={cn(
+                    "hover:text-foreground text-sm font-medium transition-colors",
+                    selectedVolume === vol
+                      ? "text-foreground border-foreground border-b-2"
+                      : "text-muted-foreground",
+                  )}
+                >
+                  {vol}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="mt-8 flex flex-col gap-3">
+            <Button size="lg" className="w-full sm:w-auto">
+              <ShoppingBag />
+              Add to Bag
+            </Button>
+            <Button size="lg" variant="outline" className="w-full sm:w-auto">
+              Buy Now
+            </Button>
+          </div>
+
+          <div className="mt-10 border-t pt-6">
+            <Collapsible
+              open={openSections.characteristics}
+              onOpenChange={() => toggleSection("characteristics")}
+            >
+              <CollapsibleTrigger className="text-foreground flex w-full items-center justify-between py-3 text-xs font-medium tracking-wider uppercase">
+                Characteristics
+                <ChevronDown
+                  className={cn(
+                    "size-4 transition-transform",
+                    openSections.characteristics && "rotate-180",
+                  )}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <dl className="space-y-2 py-2">
+                  {product.characteristics.map(({ label, value }) => (
+                    <div key={label} className="flex justify-between text-sm">
+                      <dt className="text-muted-foreground">{label}</dt>
+                      <dd className="font-medium">{value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible
+              open={openSections.description}
+              onOpenChange={() => toggleSection("description")}
+            >
+              <CollapsibleTrigger className="text-foreground flex w-full items-center justify-between border-t py-3 text-xs font-medium tracking-wider uppercase">
+                Description
+                <ChevronDown
+                  className={cn(
+                    "size-4 transition-transform",
+                    openSections.description && "rotate-180",
+                  )}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="text-muted-foreground space-y-3 border-t py-3 text-sm leading-relaxed">
+                  {product.description.map((p, i) => (
+                    <p key={i}>{p}</p>
+                  ))}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible
+              open={openSections.payment}
+              onOpenChange={() => toggleSection("payment")}
+            >
+              <CollapsibleTrigger className="text-foreground flex w-full items-center justify-between border-t py-3 text-xs font-medium tracking-wider uppercase">
+                Payment & Delivery
+                <ChevronDown
+                  className={cn(
+                    "size-4 transition-transform",
+                    openSections.payment && "rotate-180",
+                  )}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="text-muted-foreground border-t py-3 text-sm">
+                  Free standard shipping on orders over $50. Express options
+                  available at checkout. We accept major cards and PayPal.
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible
+              open={openSections.returns}
+              onOpenChange={() => toggleSection("returns")}
+            >
+              <CollapsibleTrigger className="text-foreground flex w-full items-center justify-between border-t py-3 text-xs font-medium tracking-wider uppercase">
+                Returns
+                <ChevronDown
+                  className={cn(
+                    "size-4 transition-transform",
+                    openSections.returns && "rotate-180",
+                  )}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="text-muted-foreground border-t py-3 text-sm">
+                  30-day return policy. Unopened items in original packaging can
+                  be returned for a full refund.
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-detail-5/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/ecommerce/product-detail-5/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }