jigsaw_engine 0.4.0

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

@@ -0,0 +1,223 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight, Star, Zap } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+
+const products = [
+  {
+    id: "1",
+    name: "Our Florist's Pick",
+    category: "Letterbox Flowers",
+    image:
+      "https://images.unsplash.com/photo-1471899236350-e3016bf1e69e?q=80&w=600",
+    price: 34,
+    rating: 5,
+    reviewCount: 18,
+    tag: "British tulips",
+  },
+  {
+    id: "2",
+    name: "The Anna & Hug in a Biscuit",
+    category: "Flowers & Gifts",
+    image:
+      "https://plus.unsplash.com/premium_photo-1677094766116-aa0f8742d36b?q=80&w=600",
+    price: 31,
+    rating: 5,
+    reviewCount: 100,
+    tag: null,
+  },
+  {
+    id: "3",
+    name: "The Yui",
+    category: "Hand-tied flowers",
+    image:
+      "https://images.unsplash.com/photo-1496062031456-07b8f162a322?w=600&q=80",
+    price: 37,
+    rating: 5,
+    reviewCount: 398,
+    tag: null,
+  },
+  {
+    id: "4",
+    name: "The Dara",
+    category: "Hand-tied flowers",
+    image:
+      "https://images.unsplash.com/photo-1717843756352-349bcde43545?q=80&w=600",
+    price: 65,
+    rating: 5,
+    reviewCount: 279,
+    tag: null,
+  },
+  {
+    id: "5",
+    name: "The Meadow",
+    category: "Letterbox Flowers",
+    image:
+      "https://images.unsplash.com/photo-1753187998415-441599b2ebfb?q=80&w=600",
+    price: 42,
+    rating: 5,
+    reviewCount: 156,
+    tag: "Seasonal",
+  },
+  {
+    id: "6",
+    name: "The Blush",
+    category: "Hand-tied flowers",
+    image:
+      "https://images.unsplash.com/photo-1753189198695-9cfa2b47e76b?q=80&w=600",
+    price: 48,
+    rating: 5,
+    reviewCount: 224,
+    tag: null,
+  },
+];
+
+function StarRating({ count }: { count: number }) {
+  return (
+    <div className="flex items-center gap-1" aria-label={`${count} reviews`}>
+      {[0, 1, 2, 3, 4].map((i) => (
+        <Star
+          key={i}
+          className="size-4 fill-amber-400 text-amber-400"
+          aria-hidden
+        />
+      ))}
+      <span className="text-muted-foreground text-sm">({count})</span>
+    </div>
+  );
+}
+
+export default function ProductListFour() {
+  const [api, setApi] = useState<CarouselApi>();
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(true);
+
+  useEffect(() => {
+    if (!api) return;
+    const onSelect = () => {
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    };
+    onSelect();
+    api.on("select", onSelect);
+    return () => {
+      api.off("select", onSelect);
+    };
+  }, [api]);
+
+  return (
+    <section className="w-full py-8 lg:py-16">
+      <div className="mx-auto max-w-7xl px-4">
+        <header className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-4">
+          <div className="min-w-0 flex-1 space-y-1">
+            <h2 className="text-3xl font-bold md:text-3xl">
+              Give a gift to your loved one.
+            </h2>
+            <p className="text-muted-foreground">
+              Rewards members earn double points on select items for a limited
+              time.
+            </p>
+          </div>
+          <Button variant="link" className="shrink-0 underline" asChild>
+            <Link href="#">Shop now</Link>
+          </Button>
+        </header>
+
+        <Carousel
+          setApi={setApi}
+          opts={{ align: "start", containScroll: "trimSnaps" }}
+          className="w-full"
+        >
+          <CarouselContent className="-ml-4">
+            {products.map((product) => (
+              <CarouselItem key={product.id} className="basis-[280px] pl-4">
+                <Card className="overflow-hidden border-0 bg-transparent shadow-none">
+                  <CardContent className="flex flex-col gap-3 p-0">
+                    <div className="bg-muted relative aspect-3/4 w-full overflow-hidden rounded-lg">
+                      <Image
+                        src={product.image}
+                        alt={product.name}
+                        fill
+                        className="object-cover"
+                        unoptimized
+                      />
+                      <div className="absolute top-2 left-2 flex flex-col gap-1.5">
+                        <Badge
+                          variant="default"
+                          className="gap-1 rounded-md px-2 py-1 text-xs font-medium"
+                        >
+                          <Zap className="size-3.5" />
+                          Double Points
+                        </Badge>
+                        {product.tag && (
+                          <Badge
+                            variant="secondary"
+                            className="w-fit rounded-full text-xs"
+                          >
+                            {product.tag}
+                          </Badge>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex flex-col gap-1">
+                      <p className="text-foreground leading-tight font-bold">
+                        {product.name}
+                      </p>
+                      <p className="text-muted-foreground text-sm">
+                        {product.category}
+                      </p>
+                      <StarRating count={product.reviewCount} />
+                      <div className="mt-1 flex items-end justify-between gap-2">
+                        <span className="text-foreground text-lg font-bold">
+                          {`$${product.price}`}
+                        </span>
+                        <Button size="sm" variant="default">
+                          View
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          <div className="mt-4 flex justify-end gap-1">
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-9 rounded-md"
+              onClick={() => api?.scrollPrev()}
+              disabled={!canScrollPrev}
+              aria-label="Scroll left"
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="size-9 rounded-md"
+              onClick={() => api?.scrollNext()}
+              disabled={!canScrollNext}
+              aria-label="Scroll right"
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+}

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

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

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

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

data/app/javascript/seeds/blocks/ecommerce/product-list-5/render.jsx

@@ -0,0 +1,200 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { Heart, ShoppingCart } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+const categories = [
+  { id: "all", label: "All" },
+  { id: "shorts", label: "Shorts" },
+  { id: "hat", label: "Hat" },
+  { id: "jackets", label: "Jackets" },
+  { id: "shoes", label: "Shoes" },
+  { id: "tshirt", label: "T-Shirt" },
+] as const;
+
+const products = [
+  {
+    id: "1",
+    name: "Brown Graphic T-shirt",
+    type: "T-Shirt",
+    categoryId: "tshirt",
+    image:
+      "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&q=80",
+    price: 65,
+    originalPrice: null,
+  },
+  {
+    id: "2",
+    name: "Double-Breasted Wool Coat",
+    type: "Women's Coat",
+    categoryId: "jackets",
+    image:
+      "https://images.unsplash.com/photo-1539533018447-63fcce2678e3?w=400&q=80",
+    price: 120,
+    originalPrice: 160,
+  },
+  {
+    id: "3",
+    name: "White Lipstick Print T-Shirt",
+    type: "Women's T-Shirt",
+    categoryId: "tshirt",
+    image:
+      "https://images.unsplash.com/photo-1576566588028-4147f3842f27?w=400&q=80",
+    price: 38,
+    originalPrice: 55,
+  },
+  {
+    id: "4",
+    name: "Yellow Tailored Blazer",
+    type: "Women's Blazer",
+    categoryId: "jackets",
+    image:
+      "https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=400&q=80",
+    price: 85,
+    originalPrice: null,
+  },
+  {
+    id: "5",
+    name: "Classic White Sneakers",
+    type: "Shoes",
+    categoryId: "shoes",
+    image:
+      "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400&q=80",
+    price: 95,
+    originalPrice: 120,
+  },
+  {
+    id: "6",
+    name: "Navy Oversized Hoodie",
+    type: "Hoodie",
+    categoryId: "tshirt",
+    image:
+      "https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=400&q=80",
+    price: 72,
+    originalPrice: null,
+  },
+  {
+    id: "7",
+    name: "Structured Leather Handbag",
+    type: "Bag",
+    categoryId: "jackets",
+    image:
+      "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=400&q=80",
+    price: 145,
+    originalPrice: 180,
+  },
+  {
+    id: "8",
+    name: "Grey Beanie",
+    type: "Hat",
+    categoryId: "hat",
+    image:
+      "https://images.unsplash.com/photo-1576871337632-b9aef4c17ab9?w=400&q=80",
+    price: 28,
+    originalPrice: null,
+  },
+];
+
+export default function ProductListFive() {
+  const [activeCategory, setActiveCategory] = useState<string>("all");
+
+  const filteredProducts =
+    activeCategory === "all"
+      ? products
+      : products.filter((p) => p.categoryId === activeCategory);
+
+  return (
+    <section className="bg-background w-full px-4 py-12 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-6xl">
+        <h2 className="mb-8 text-center text-3xl font-bold md:text-3xl">
+          Trending Now – Step Into Style
+        </h2>
+
+        <nav
+          className="mb-10 flex flex-wrap justify-center gap-1.5"
+          role="tablist"
+        >
+          {categories.map((category) => (
+            <Button
+              key={category.id}
+              variant={activeCategory === category.id ? "default" : "outline"}
+              onClick={() => setActiveCategory(category.id)}
+              className="rounded-full"
+            >
+              {category.label}
+            </Button>
+          ))}
+        </nav>
+
+        {filteredProducts.length > 0 ? (
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:gap-y-8 lg:grid-cols-4">
+            {filteredProducts.map((product) => (
+              <Card
+                key={product.id}
+                className="group overflow-hidden rounded-none border-0 py-0 shadow-none"
+              >
+                <CardContent className="space-y-3 p-0">
+                  <div className="relative aspect-square overflow-hidden">
+                    <Image
+                      src={product.image}
+                      alt={product.name}
+                      width={400}
+                      height={400}
+                      className="size-full rounded-xl object-cover"
+                      unoptimized
+                    />
+                    <div className="absolute inset-0 flex flex-col justify-end rounded-xl bg-black/0 p-4 transition-colors duration-200 group-hover:bg-black/10">
+                      <div className="translate-y-6 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
+                        <Button
+                          variant="secondary"
+                          className="w-full rounded-full"
+                        >
+                          <ShoppingCart />
+                          Add to Cart
+                        </Button>
+                      </div>
+                    </div>
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="absolute top-3 right-3 rounded-full border-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                      aria-label="Add to favorites"
+                    >
+                      <Heart />
+                    </Button>
+                  </div>
+                  <div className="space-y-1">
+                    <p className="text-muted-foreground text-xs">
+                      {product.type}
+                    </p>
+                    <p className="line-clamp-2 text-sm font-semibold">
+                      {product.name}
+                    </p>
+                    <div className="flex items-baseline gap-2">
+                      <span className="text-foreground text-base font-semibold">
+                        ${product.price}
+                      </span>
+                      {product.originalPrice && (
+                        <span className="text-muted-foreground text-sm line-through">
+                          ${product.originalPrice}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="text-muted-foreground pt-4 text-center">
+            No products found
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-list-6/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-list-6/data.js

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

data/app/javascript/seeds/blocks/ecommerce/product-list-6/render.jsx

@@ -0,0 +1,177 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { Heart, ShoppingCart, SlidersHorizontal } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+const categories = [
+  { id: "all", label: "All Perfumes" },
+  { id: "womens", label: "Women's" },
+  { id: "unisex", label: "Unisex" },
+  { id: "bath-body", label: "Bath & Body" },
+] as const;
+
+const products = [
+  {
+    id: "1",
+    name: "Ashes of Moonlight",
+    categoryId: "womens",
+    image:
+      "https://images.unsplash.com/photo-1541643600914-78b084683601?w=400&q=80",
+    imageVariant:
+      "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=400&q=80",
+    price: 139.0,
+  },
+  {
+    id: "2",
+    name: "Whispers of Ether",
+    categoryId: "unisex",
+    image:
+      "https://images.unsplash.com/photo-1458538977777-0549b2370168?q=80&w=400",
+    imageVariant:
+      "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=400&q=80",
+    price: 264.0,
+  },
+  {
+    id: "3",
+    name: "Memoire Sauvage",
+    categoryId: "unisex",
+    image:
+      "https://images.unsplash.com/photo-1700522360590-a913ff2a3d9f?q=80&w=400",
+    imageVariant:
+      "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=400&q=80",
+    price: 124.0,
+  },
+  {
+    id: "4",
+    name: "Crimson Mirage",
+    categoryId: "womens",
+    image:
+      "https://images.unsplash.com/photo-1594035910387-fea47794261f?w=400&q=80",
+    imageVariant:
+      "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=400&q=80",
+    price: 89.0,
+  },
+  {
+    id: "5",
+    name: "Velvet Nocturne",
+    categoryId: "womens",
+    image:
+      "https://images.unsplash.com/photo-1615634260167-c8cdede054de?w=400&q=80",
+    imageVariant:
+      "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=400&q=80",
+    price: 156.0,
+  },
+  {
+    id: "6",
+    name: "Aqua Solis",
+    categoryId: "unisex",
+    image:
+      "https://images.unsplash.com/photo-1587017539504-67cfbddac569?w=400&q=80",
+    imageVariant:
+      "https://images.unsplash.com/photo-1594035910387-fea47794261f?w=400&q=80",
+    price: 98.0,
+  },
+];
+
+export default function ProductListSix() {
+  const [activeCategory, setActiveCategory] = useState<string>("all");
+
+  const filteredProducts =
+    activeCategory === "all"
+      ? products
+      : products.filter((p) => p.categoryId === activeCategory);
+
+  return (
+    <section className="w-full px-4 py-14">
+      <div className="mx-auto max-w-6xl px-4">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:border-b">
+          <nav
+            className="flex gap-6 overflow-x-auto pb-4 sm:pb-0"
+            role="tablist"
+          >
+            {categories.map((cat) => (
+              <button
+                key={cat.id}
+                type="button"
+                role="tab"
+                aria-selected={activeCategory === cat.id}
+                onClick={() => setActiveCategory(cat.id)}
+                className={`focus-visible:ring-ring shrink-0 border-b-2 pb-4 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none sm:pb-4 ${
+                  activeCategory === cat.id
+                    ? "border-primary text-foreground"
+                    : "text-foreground/80 hover:text-foreground border-transparent"
+                }`}
+              >
+                {cat.label}
+              </button>
+            ))}
+          </nav>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-muted-foreground hover:text-foreground shrink-0 gap-2"
+          >
+            <SlidersHorizontal className="size-4" />
+            Filters
+          </Button>
+        </div>
+
+        {filteredProducts.length > 0 ? (
+          <div className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {filteredProducts.map((product) => (
+              <Card
+                key={product.id}
+                className="group relative overflow-hidden pt-0 shadow-none"
+              >
+                <figure className="relative">
+                  <Image
+                    src={product.image}
+                    alt={product.name}
+                    width={280}
+                    height={280}
+                    className="aspect-square w-full object-cover opacity-100 transition-opacity duration-200 group-hover:opacity-0"
+                    unoptimized
+                  />
+                  <Image
+                    src={product.imageVariant}
+                    alt={`${product.name} variant`}
+                    width={280}
+                    height={280}
+                    className="absolute inset-0 aspect-square w-full object-cover opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                    unoptimized
+                  />
+                  <Button
+                    variant="outline"
+                    size="icon-sm"
+                    className="border-background bg-background/90 hover:bg-background absolute top-3 right-3 rounded-full shadow-sm"
+                    aria-label="Add to favorites"
+                  >
+                    <Heart />
+                  </Button>
+                </figure>
+                <CardContent>
+                  <div className="space-y-3">
+                    <p className="font-medium">{product.name}</p>
+                    <p className="text-muted-foreground text-sm font-medium">
+                      ${product.price.toFixed(2)}
+                    </p>
+                    <Button variant="secondary" className="w-full">
+                      <ShoppingCart />
+                      Add to Cart
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="text-muted-foreground text-center pt-4">No products found</div>
+        )}
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-list-7/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-list-7/data.js

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