jigsaw_engine 0.4.0

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

@@ -0,0 +1,175 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { PlusIcon, Search } from "lucide-react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+const categories = [
+  { id: "all", label: "All" },
+  { id: "furniture", label: "Furniture" },
+  { id: "shoes", label: "Shoes" },
+  { id: "most-purchased", label: "Most Purchased" },
+  { id: "electronics", label: "Electronics" },
+] as const;
+
+type CategoryId = (typeof categories)[number]["id"];
+
+const products = [
+  {
+    id: "1",
+    name: "Aurora Wireless",
+    categoryId: "electronics" as CategoryId,
+    image:
+      "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&q=80",
+    price: 49.99,
+  },
+  {
+    id: "2",
+    name: "Smart Watch Pro",
+    categoryId: "electronics" as CategoryId,
+    image:
+      "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&q=80",
+    price: 69.99,
+  },
+  {
+    id: "3",
+    name: "Smart Speaker",
+    categoryId: "electronics" as CategoryId,
+    image:
+      "https://images.unsplash.com/photo-1543512214-318c7553f230?w=400&q=80",
+    price: 23.99,
+  },
+  {
+    id: "4",
+    name: "Controller elite",
+    categoryId: "electronics" as CategoryId,
+    image:
+      "https://images.unsplash.com/photo-1606144042614-b2417e99c4e3?w=400&q=80",
+    price: 44.99,
+  },
+  {
+    id: "5",
+    name: "AirLite Earbuds",
+    categoryId: "most-purchased" as CategoryId,
+    image:
+      "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=400&q=80",
+    price: 45.94,
+  },
+  {
+    id: "6",
+    name: "Laptop Backpack",
+    categoryId: "shoes" as CategoryId,
+    image:
+      "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=400&q=80",
+    price: 34.5,
+  },
+];
+
+export default function ProductListSeven() {
+  const [activeCategory, setActiveCategory] = useState<string>("all");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredProducts = products.filter((product) => {
+    const matchesCategory =
+      activeCategory === "all" || product.categoryId === activeCategory;
+    const matchesSearch =
+      !searchQuery.trim() ||
+      product.name.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  const total = filteredProducts.length;
+  const from = total === 0 ? 0 : 1;
+  const to = total;
+
+  return (
+    <section className="w-full px-4 py-14">
+      <div className="mx-auto max-w-6xl space-y-4 px-4">
+        <header className="space-y-4">
+          <h2 className="text-3xl font-bold">Products</h2>
+          <div className="flex flex-col lg:items-center justify-between lg:flex-row gap-4">
+            <nav className="flex flex-wrap gap-1">
+              {categories.map((cat) => (
+                <Button
+                  key={cat.id}
+                  variant={activeCategory === cat.id ? "default" : "ghost"}
+                  size="sm"
+                  onClick={() => setActiveCategory(cat.id)}
+                  className="rounded-lg"
+                >
+                  {cat.label}
+                </Button>
+              ))}
+            </nav>
+            <div className="relative">
+              <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+              <Input
+                type="search"
+                placeholder="Search product...."
+                className="w-full pl-9 sm:w-64"
+                aria-label="Search product"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+        </header>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
+          {filteredProducts.map((product) => (
+            <Card
+              key={product.id}
+              className="group overflow-hidden rounded-xl py-0 shadow-none"
+            >
+              <CardContent className="relative p-0">
+                <div className="relative aspect-square">
+                  <Link href="#">
+                    <Image
+                      src={product.image}
+                      alt={product.name}
+                      width={400}
+                      height={400}
+                      className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                      unoptimized
+                    />
+                  </Link>
+                  <div className="from-background bg-background/50 absolute start-0 right-0 bottom-0 flex items-end justify-between gap-2 px-4 py-2 backdrop-blur-sm">
+                    <div className="space-y-1">
+                      <p className="font-medium">{product.name}</p>
+                      <p className="text-muted-foreground text-sm">
+                        ${product.price.toFixed(2)}
+                      </p>
+                    </div>
+                    <Button
+                      variant="secondary"
+                      size="icon"
+                      className="rounded-full shadow"
+                      aria-label="View product"
+                    >
+                      <PlusIcon />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {filteredProducts.length === 0 ? (
+          <p className="text-muted-foreground mt-6 text-center text-sm">
+            No products found
+          </p>
+        ) : (
+          <p className="text-muted-foreground mt-6 text-sm">
+            Showing {from} to {to} of {total} entries
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,231 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import { Separator } from "@/components/ui/separator";
+
+const products = [
+  {
+    id: "1",
+    category: "Clothing",
+    name: "Men's Solid Slim Fit Cotton Casual Shirt",
+    price: 70,
+    originalPrice: 100,
+    image:
+      "https://images.unsplash.com/photo-1596755094514-f87e34085b2c?w=400&q=80",
+  },
+  {
+    id: "2",
+    category: "Nail Polishes",
+    name: "Debelle Metallic Gel Nail Lacquer",
+    price: 80,
+    originalPrice: 100,
+    image:
+      "https://images.unsplash.com/photo-1604654894610-df63bc536371?w=400&q=80",
+  },
+  {
+    id: "3",
+    category: "Ceramic",
+    name: "Where Elegance Meets Functionality",
+    price: 150,
+    originalPrice: 200,
+    image:
+      "https://images.unsplash.com/photo-1610701596007-11502861dcfa?w=400&q=80",
+  },
+  {
+    id: "4",
+    category: "Furniture",
+    name: "Lunaluxe Velvet Executive Chair",
+    price: 500,
+    originalPrice: 550,
+    image:
+      "https://images.unsplash.com/photo-1580480055273-228ff5388ef8?w=400&q=80",
+  },
+  {
+    id: "5",
+    category: "Clothing",
+    name: "Colorful T-Shirts Casual Comfortable Wear",
+    price: 50,
+    originalPrice: 70,
+    image:
+      "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400&q=80",
+  },
+  {
+    id: "6",
+    category: "Nail Polishes",
+    name: "Bella Voste Sugar Baby Nail Paints",
+    price: 50,
+    originalPrice: 70,
+    image:
+      "https://images.unsplash.com/photo-1631214524028-2bc8dfdee1e3?w=400&q=80",
+  },
+  {
+    id: "7",
+    category: "Clothing",
+    name: "Classic Denim Jacket",
+    price: 89,
+    originalPrice: 120,
+    image:
+      "https://images.unsplash.com/photo-1551028719-00167b16eac5?w=400&q=80",
+  },
+  {
+    id: "8",
+    category: "Furniture",
+    name: "Minimal Oak Side Table",
+    price: 180,
+    originalPrice: 220,
+    image:
+      "https://images.unsplash.com/photo-1532372320572-cda25653a26d?w=400&q=80",
+  },
+  {
+    id: "9",
+    category: "Ceramic",
+    name: "Handcrafted Stoneware Mug",
+    price: 35,
+    originalPrice: 45,
+    image:
+      "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?w=400&q=80",
+  },
+  {
+    id: "10",
+    category: "Nail Polishes",
+    name: "Glossy Finish Top Coat",
+    price: 25,
+    originalPrice: 35,
+    image:
+      "https://images.unsplash.com/photo-1604654894610-df63bc536371?w=400&q=80",
+  },
+  {
+    id: "11",
+    category: "Clothing",
+    name: "Wool Blend Winter Scarf",
+    price: 45,
+    originalPrice: 65,
+    image:
+      "https://images.unsplash.com/photo-1520903920243-00d872a2d1c9?w=400&q=80",
+  },
+  {
+    id: "12",
+    category: "Furniture",
+    name: "Industrial Pendant Lamp",
+    price: 120,
+    originalPrice: 150,
+    image:
+      "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=400&q=80",
+  },
+];
+
+export default function ProductListEight() {
+  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 px-4 py-14">
+      <div className="mx-auto max-w-6xl space-y-6 px-4">
+        <header className="flex items-end justify-between gap-4">
+          <h2 className="text-2xl font-bold md:text-3xl">
+            New Arrival In Fashion
+          </h2>
+          <Button variant="link" className="shrink-0 p-0" asChild>
+            <Link href="#">View all</Link>
+          </Button>
+        </header>
+
+        <Separator />
+
+        <Carousel
+          setApi={setApi}
+          opts={{ align: "start", containScroll: "trimSnaps" }}
+          className="w-full"
+        >
+          <CarouselContent>
+            {products.map((product) => (
+              <CarouselItem
+                key={product.id}
+                className="basis-2/3 pl-4 lg:basis-1/3"
+              >
+                <Card className="overflow-hidden rounded-lg border py-0 shadow-sm">
+                  <CardContent className="flex p-0">
+                    <div className="bg-muted relative h-32 w-28 shrink-0 overflow-hidden sm:h-36 sm:w-32">
+                      <Image
+                        src={product.image}
+                        alt={product.name}
+                        fill
+                        className="object-cover"
+                        unoptimized
+                      />
+                    </div>
+                    <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5 p-4">
+                      <p className="text-muted-foreground text-xs tracking-wide uppercase">
+                        {product.category}
+                      </p>
+                      <p className="text-foreground line-clamp-2 leading-tight font-semibold">
+                        {product.name}
+                      </p>
+                      <div className="mt-1 flex items-baseline gap-2">
+                        <span className="font-bold">
+                          ${product.price.toFixed(2)}
+                        </span>
+                        <span className="text-muted-foreground text-sm line-through">
+                          ${product.originalPrice.toFixed(2)}
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+
+          <div className="flex justify-center gap-1 pt-4">
+            <Button
+              variant="outline"
+              size="icon"
+              className="rounded-full"
+              onClick={() => api?.scrollPrev()}
+              disabled={!canScrollPrev}
+              aria-label="Previous"
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="rounded-full"
+              onClick={() => api?.scrollNext()}
+              disabled={!canScrollNext}
+              aria-label="Next"
+            >
+              <ChevronRight />
+            </Button>
+          </div>
+        </Carousel>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-quickview-1/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-quickview-1/data.js

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

data/app/javascript/seeds/blocks/ecommerce/product-quickview-1/render.jsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ProductQuickviewDialog } from "./product-quickview-modal";
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+const productData = {
+  id: "1",
+  title: "Skater Jeans",
+  price: 49,
+  rating: 4,
+  reviewCount: 117,
+  image:
+    "https://images.unsplash.com/photo-1627225924765-552d49cf47ad?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  colors: [
+    { name: "White", value: "#FFFFFF" },
+    { name: "Gray", value: "#9CA3AF" },
+    { name: "Crimson", value: "crimson" },
+    { name: "Navy", value: "#1E293B" }
+  ],
+  sizes: [
+    { name: "XXS", available: true },
+    { name: "XS", available: true },
+    { name: "S", available: true },
+    { name: "M", available: true },
+    { name: "L", available: true },
+    { name: "XL", available: true },
+    { name: "XXL", available: true },
+    { name: "XXXL", available: false }
+  ]
+};
+
+export default function Page() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <div className="mx-auto max-w-80 py-60 md:py-24">
+        <Link href="#" className="group">
+          <figure className="relative aspect-square w-full overflow-hidden rounded-md object-cover">
+            <Image
+              fill
+              className="object-cover transition-transform duration-300 group-hover:scale-105 group-hover:rotate-2"
+              src={productData.image}
+              alt={productData.title}
+            />
+          </figure>
+          <div className="mt-3 space-y-2">
+            <div className="flex items-center justify-between gap-1">
+              <p className="font-medium">{productData.title}</p>
+              <p className="text-muted-foreground">{productData.price}</p>
+            </div>
+          </div>
+          <Button onClick={() => setOpen(true)} variant="secondary" className="mt-4 w-full">
+            Quick View
+          </Button>
+        </Link>
+      </div>
+      <ProductQuickviewDialog open={open} onOpenChange={setOpen} product={productData} />
+    </>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/product-quickview-2/config.json

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

data/app/javascript/seeds/blocks/ecommerce/product-quickview-2/data.js

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

data/app/javascript/seeds/blocks/ecommerce/product-quickview-2/render.jsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ProductQuickviewDialog } from "./product-quickview-modal";
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+
+const productData = {
+  id: "1",
+  title: "Skater Jeans",
+  description:
+    "This theme is designed to make your online store look stylish and professional while offering your customers an exceptional user experience.",
+  old_price: "$49",
+  price: "$39",
+  rating: 4,
+  reviewCount: 117,
+  image:
+    "https://images.unsplash.com/photo-1627225924765-552d49cf47ad?q=80&w=700&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  colors: [
+    { name: "White", value: "#FFFFFF" },
+    { name: "Gray", value: "#9CA3AF" },
+    { name: "Crimson", value: "crimson" },
+    { name: "Navy", value: "#1E293B" }
+  ],
+  sizes: [
+    { name: "XS", available: true },
+    { name: "S", available: true },
+    { name: "M", available: true }
+  ]
+};
+
+export default function Page() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <div className="mx-auto h-[900px] max-w-80 py-24">
+        <Link href="#" className="group">
+          <figure className="relative aspect-square w-full overflow-hidden rounded-md object-cover">
+            <Image
+              fill
+              className="object-cover transition-transform duration-300 group-hover:scale-105 group-hover:rotate-2"
+              src={productData.image}
+              alt={productData.title}
+            />
+          </figure>
+          <div className="mt-3 space-y-2">
+            <div className="flex items-center justify-between gap-1">
+              <p className="font-medium">{productData.title}</p>
+              <p className="text-muted-foreground">{productData.price}</p>
+            </div>
+          </div>
+          <Button onClick={() => setOpen(true)} variant="secondary" className="mt-4 w-full">
+            Quick View
+          </Button>
+        </Link>
+      </div>
+      <ProductQuickviewDialog open={open} onOpenChange={setOpen} product={productData} />
+    </>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/promo-sections-1/config.json

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

data/app/javascript/seeds/blocks/ecommerce/promo-sections-1/data.js

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

data/app/javascript/seeds/blocks/ecommerce/promo-sections-1/render.jsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { MarqueeEffect } from "@/components/marquee-effect";
+import { Button } from "@/components/ui/button";
+import { ArrowRightIcon } from "lucide-react";
+import Image from "next/image";
+
+const images = [
+  "https://images.unsplash.com/photo-1502389614483-e475fc34407e?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1465101046530-73398c7f28ca?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1611269154421-4e27233ac5c7?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1491553895911-0055eca6402d?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=500&auto=format&fit=crop",
+  "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=500&auto=format&fit=crop",
+];
+
+export default function PromoSection() {
+  return (
+    <section className="py-10">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="grid items-center lg:grid-cols-2">
+          <header className="relative z-10 mx-auto mb-8 max-w-xl text-center lg:mb-10 lg:text-start">
+            <h3 className="mb-4 text-4xl font-bold text-balance md:text-5xl leading-tight">
+              Summer styles are finally here
+            </h3>
+            <p className="text-muted-foreground text-balance lg:text-lg">
+              This year, our new summer collection will shelter you from the
+              harsh elements of a world that doesn&lsquo;t care if you live or
+              die.
+            </p>
+            <Button size="lg" className="mt-6">
+              Shop Collection
+              <ArrowRightIcon />
+            </Button>
+          </header>
+          <div className="absolute grid h-96 grid-cols-2 gap-4 overflow-hidden mask-t-from-80% mask-r-from-10% mask-b-from-80% mask-l-from-10% lg:static lg:h-150 lg:mask-r-from-70% lg:mask-l-from-70%">
+            {[
+              {
+                reverse: false,
+              },
+              {
+                reverse: true,
+              },
+            ].map((mq, i) => (
+              <MarqueeEffect
+                key={i}
+                gap={12}
+                direction="vertical"
+                reverse={mq.reverse}
+                speed={30}
+                speedOnHover={1}
+              >
+                {images.slice(i * 3, (i + 1) * 3).map((image, i) => (
+                  <figure key={i}>
+                    <Image
+                      src={image}
+                      className="aspect-square object-cover"
+                      alt="..."
+                      width={400}
+                      height={400}
+                    />
+                  </figure>
+                ))}
+              </MarqueeEffect>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-1/config.json

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

data/app/javascript/seeds/blocks/ecommerce/shopping-cart-1/data.js

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