jigsaw_engine 0.4.0

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

@@ -0,0 +1,87 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+const products = [
+  {
+    id: 1,
+    name: "Sweat polar",
+    href: "#",
+    imageSrc: "/images/products/01.jpeg",
+    imageAlt: "Front of men's Basic Tee in black.",
+    price: "$35",
+    color: "Black",
+  },
+  {
+    id: 2,
+    name: "T-shirt",
+    href: "#",
+    imageSrc: "/images/products/02.jpeg",
+    imageAlt: "Front of men's Basic Tee in black.",
+    price: "$28",
+    color: "Aspen White",
+  },
+  {
+    id: 3,
+    name: "T-shirt",
+    href: "#",
+    imageSrc: "/images/products/03.jpeg",
+    imageAlt: "Front of men's Basic Tee in black.",
+    price: "$40",
+    color: "Charcoal",
+  },
+  {
+    id: 4,
+    name: "Red Hat",
+    href: "#",
+    imageSrc: "/images/products/04.jpeg",
+    imageAlt: "Front of men's Basic Tee in black.",
+    price: "$49",
+    color: "Iso Dots",
+  },
+];
+
+export default function ProductList() {
+  return (
+    <section className="mx-auto max-w-2xl px-4 py-14 sm:px-6 sm:py-20 lg:max-w-7xl lg:px-8">
+      <div className="mb-6 flex justify-between">
+        <h2 className="text-2xl font-bold">New Season Products</h2>
+        <Button variant="link" className="px-0!" asChild>
+          <Link href="#">
+            See all products <ChevronRight />
+          </Link>
+        </Button>
+      </div>
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+        {products.map((product) => (
+          <div key={product.id} className="group relative space-y-4">
+            <figure className="w-full overflow-hidden rounded-md group-hover:opacity-75">
+              <Image
+                alt={product.imageAlt}
+                src={product.imageSrc}
+                width={300}
+                height={300}
+                className="aspect-3/4 w-full object-cover"
+                unoptimized
+              />
+            </figure>
+            <div className="flex justify-between">
+              <div>
+                <h3 className="font-medium">
+                  <a href={product.href}>
+                    <span aria-hidden="true" className="absolute inset-0" />
+                    {product.name}
+                  </a>
+                </h3>
+                <p className="text-muted-foreground text-sm">{product.color}</p>
+              </div>
+              <p className="font-medium">{product.price}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,151 @@
+"use client";
+
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Heart, ShoppingCart } from "lucide-react";
+import { useState } from "react";
+
+interface ProductCardProps {
+  id: string;
+  image: string;
+  title: string;
+  price: number;
+  onAddToCart?: () => void;
+  onToggleFavorite?: () => void;
+}
+
+const products = [
+  {
+    id: "1",
+    image: "/images/products/01.jpeg",
+    title: "Premium Wireless Headphones",
+    price: 149.99,
+  },
+  {
+    id: "2",
+    image: "/images/products/02.jpeg",
+    title: "Smart Watch Pro",
+    price: 299.99,
+  },
+  {
+    id: "3",
+    image: "/images/products/03.jpeg",
+    title: "Professional Camera Lens",
+    price: 599.99,
+  },
+  {
+    id: "4",
+    image: "/images/products/04.jpeg",
+    title: "Mechanical Gaming Keyboard",
+    price: 179.99,
+  },
+];
+
+export default function ProductList() {
+  const handleAddToCart = (productId: string) => {
+    console.log(`Added product ${productId} to cart`);
+  };
+
+  const handleToggleFavorite = (productId: string) => {
+    console.log(`Toggled favorite for product ${productId}`);
+  };
+
+  return (
+    <section className="py-12 sm:px-6 lg:px-8">
+      <div className="mx-auto max-w-7xl px-4">
+        <header className="mb-12">
+          <h2 className="text-foreground mb-2 text-3xl font-bold">
+            Featured Products
+          </h2>
+          <p className="text-muted-foreground">
+            Discover our collection of premium electronics and accessories
+          </p>
+        </header>
+
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+          {products.map((product) => (
+            <ProductCard
+              key={product.id}
+              id={product.id}
+              image={product.image}
+              title={product.title}
+              price={product.price}
+              onAddToCart={() => handleAddToCart(product.id)}
+              onToggleFavorite={() => handleToggleFavorite(product.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function ProductCard({
+  id,
+  image,
+  title,
+  price,
+  onAddToCart,
+  onToggleFavorite,
+}: ProductCardProps) {
+  const [isFavorite, setIsFavorite] = useState(false);
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+
+  const handleToggleFavorite = () => {
+    setIsFavorite(!isFavorite);
+    onToggleFavorite?.();
+  };
+
+  const handleAddToCart = () => {
+    setIsAddingToCart(true);
+    onAddToCart?.();
+    setTimeout(() => setIsAddingToCart(false), 500);
+  };
+
+  return (
+    <div className="border-border bg-card w-full overflow-hidden rounded-lg border">
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        <Image
+          src={image}
+          alt={title}
+          fill
+          className="object-cover transition-transform duration-300 hover:scale-105"
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+        />
+        <Button
+          onClick={handleToggleFavorite}
+          size="icon"
+          className="bg-background/80 hover:bg-background absolute top-3 right-3 rounded-full"
+          aria-label={isFavorite ? "Remove from favorites" : "Add to favorites"}
+        >
+          <Heart
+            size={20}
+            className={`transition-all ${
+              isFavorite
+                ? "fill-destructive text-destructive"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          />
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-3 p-4">
+        <h5 className="text-card-foreground line-clamp-2 text-lg text-balance">
+          {title}
+        </h5>
+        <div className="text-foreground text-xl font-semibold">
+          ${price.toFixed(2)}
+        </div>
+        <Button
+          variant="secondary"
+          onClick={handleAddToCart}
+          disabled={isAddingToCart}
+          className="w-full gap-2"
+        >
+          <ShoppingCart size={18} />
+          {isAddingToCart ? "Adding..." : "Add to Cart"}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,313 @@
+"use client";
+
+import Image from "next/image";
+import { useMemo, useState } from "react";
+import {
+  HeartIcon,
+  LayoutGridIcon,
+  ListIcon,
+  ShoppingCartIcon,
+  StarIcon,
+  StoreIcon,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+type SortBy = "new" | "popular" | "price";
+type ViewMode = "list" | "grid";
+
+const products = [
+  {
+    id: "1",
+    title:
+      "Product wholesale Original Used Second hand Oppo Mobile phone 128GB",
+    image:
+      "https://images.unsplash.com/photo-1580910051074-3eb694886505?q=80&w=200",
+    price: "899.00",
+    originalPrice: "298.00",
+    discount: "30",
+    rating: 4.5,
+    ordersCount: 154,
+    seller: "AB Technology Ltd",
+    isNew: true,
+  },
+  {
+    id: "2",
+    title:
+      "Magic The Gathering Final Fantasy Collector Booster Box MTG Presale",
+    image:
+      "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?w=200&q=80",
+    price: "86.00",
+    originalPrice: null,
+    discount: null,
+    rating: 4.5,
+    ordersCount: 320,
+    seller: "AB Technology Ltd",
+    isNew: false,
+  },
+  {
+    id: "3",
+    title: "Wireless Bluetooth Headphones with Noise Cancellation",
+    image:
+      "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&q=80",
+    price: "129.00",
+    originalPrice: "199.00",
+    discount: "35",
+    rating: 4.8,
+    ordersCount: 89,
+    seller: "Tech Audio Co",
+    isNew: true,
+  },
+  {
+    id: "4",
+    title: "Minimalist Leather Watch with Stainless Steel Band",
+    image:
+      "https://images.unsplash.com/photo-1601737487795-dab272f52420?q=80&w=200",
+    price: "249.00",
+    originalPrice: "349.00",
+    discount: "29",
+    rating: 4.6,
+    ordersCount: 412,
+    seller: "Time & Style",
+    isNew: false,
+  },
+  {
+    id: "5",
+    title: "Portable SSD 1TB External Storage USB-C",
+    image:
+      "https://images.unsplash.com/photo-1601737487795-dab272f52420?q=80&w=200",
+    price: "89.00",
+    originalPrice: null,
+    discount: null,
+    rating: 4.9,
+    ordersCount: 1203,
+    seller: "DataDrive Inc",
+    isNew: true,
+  },
+];
+
+function StarRating({ value }: { value: number }) {
+  const full = Math.floor(value);
+  const hasHalf = value % 1 !== 0;
+  return (
+    <div className="flex gap-0.5" aria-label={`${value} out of 5 stars`}>
+      {[0, 1, 2, 3, 4].map((i) => (
+        <span key={i}>
+          {i < full ? (
+            <StarIcon className="size-4 fill-amber-400 text-amber-400" />
+          ) : i === full && hasHalf ? (
+            <StarIcon className="size-4 fill-amber-400 text-amber-400" />
+          ) : (
+            <StarIcon className="text-muted-foreground size-4 opacity-50" />
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export default function ProductListThree() {
+  const [sortBy, setSortBy] = useState<SortBy>("new");
+  const [viewMode, setViewMode] = useState<ViewMode>("list");
+
+  const sortedProducts = useMemo(() => {
+    const list = [...products];
+    switch (sortBy) {
+      case "new":
+        return list.sort((a, b) =>
+          a.isNew === b.isNew ? 0 : a.isNew ? -1 : 1,
+        );
+      case "popular":
+        return list.sort((a, b) => b.ordersCount - a.ordersCount);
+      case "price":
+        return list.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
+      default:
+        return list;
+    }
+  }, [sortBy]);
+
+  return (
+    <div className="mx-auto w-full max-w-5xl space-y-4 py-8 lg:py-16">
+      <header className="mb-8 space-y-2">
+        <h4 className="text-3xl font-bold">All Products</h4>
+        <p className="text-muted-foreground text-sm">
+          Browse our collection of featured products
+        </p>
+      </header>
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-sm">Show by:</span>
+          <Select value={sortBy} onValueChange={(v) => setSortBy(v as SortBy)}>
+            <SelectTrigger size="sm" aria-label="Show by">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="new">New items</SelectItem>
+              <SelectItem value="popular">Popular</SelectItem>
+              <SelectItem value="price">Price</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <ButtonGroup orientation="horizontal">
+          <Button
+            size="icon"
+            variant={viewMode === "list" ? "default" : "outline"}
+            aria-pressed={viewMode === "list"}
+            onClick={() => setViewMode("list")}
+          >
+            <ListIcon />
+          </Button>
+          <Button
+            size="icon"
+            variant={viewMode === "grid" ? "default" : "outline"}
+            aria-pressed={viewMode === "grid"}
+            onClick={() => setViewMode("grid")}
+          >
+            <LayoutGridIcon />
+          </Button>
+        </ButtonGroup>
+      </div>
+
+      <div
+        className={
+          viewMode === "grid" ? "grid gap-4 sm:grid-cols-3" : "space-y-4"
+        }
+      >
+        {sortedProducts.map((product) =>
+          viewMode === "list" ? (
+            <Card key={product.id} className="overflow-hidden py-0 shadow-none">
+              <CardContent className="flex items-start ps-0 pe-4">
+                <div className="relative shrink-0">
+                  <div className="bg-muted relative aspect-square w-28 overflow-hidden rounded-l-xl md:w-36">
+                    <Image
+                      src={product.image}
+                      alt={product.title}
+                      fill
+                      className="object-cover"
+                      unoptimized
+                    />
+                    {product.isNew && (
+                      <Badge
+                        variant="destructive"
+                        className="absolute top-2 left-2 rounded-sm"
+                      >
+                        New
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+                <div className="flex min-w-0 flex-1 flex-col justify-center gap-1 p-4">
+                  <p className="text-foreground line-clamp-2 text-sm font-medium">
+                    {product.title}
+                  </p>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-primary text-lg font-bold">
+                      ${product.price}
+                    </span>
+                    {product.originalPrice && (
+                      <span className="text-muted-foreground text-sm line-through">
+                        ${product.originalPrice}
+                      </span>
+                    )}
+                    {product.discount && (
+                      <span className="text-destructive text-sm">
+                        -{product.discount}%
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
+                    <StarRating value={product.rating} />
+                    <span>{product.rating}</span>
+                    <span aria-hidden>·</span>
+                    <span>{product.ordersCount} orders this week</span>
+                  </div>
+                  <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
+                    <StoreIcon className="size-3.5 shrink-0" />
+                    <span>Seller: {product.seller}</span>
+                  </div>
+                </div>
+                <div className="flex shrink-0 flex-col justify-center gap-2 py-4">
+                  <Button size="sm">
+                    <ShoppingCartIcon />
+                    Add to cart
+                  </Button>
+                  <Button size="sm" variant="outline">
+                    <HeartIcon />
+                    Add to wishlist
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card key={product.id} className="overflow-hidden py-0 shadow-none">
+              <CardContent className="flex h-full flex-col p-0">
+                <div className="bg-muted relative aspect-square w-full overflow-hidden">
+                  <Image
+                    src={product.image}
+                    alt={product.title}
+                    fill
+                    className="object-cover"
+                    unoptimized
+                  />
+                  {product.isNew && (
+                    <Badge
+                      variant="destructive"
+                      className="absolute top-2 left-2 rounded-sm"
+                    >
+                      New
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex flex-1 flex-col gap-2 p-4">
+                  <p className="text-foreground line-clamp-2 text-sm font-medium">
+                    {product.title}
+                  </p>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="text-primary font-bold">
+                      ${product.price}
+                    </span>
+                    {product.originalPrice && (
+                      <span className="text-muted-foreground text-sm line-through">
+                        ${product.originalPrice}
+                      </span>
+                    )}
+                    {product.discount && (
+                      <span className="text-destructive text-sm">
+                        -{product.discount}%
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
+                    <StarRating value={product.rating} />
+                    <span>{product.rating}</span>
+                    <span aria-hidden>·</span>
+                    <span>{product.ordersCount} orders</span>
+                  </div>
+                  <div className="mt-auto pt-2 flex gap-2">
+                    <Button size="sm" className="flex-1">
+                      <ShoppingCartIcon />
+                      Cart
+                    </Button>
+                    <Button size="sm" variant="outline">
+                      <HeartIcon />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}

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

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

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

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