jigsaw_engine 0.4.0

data/app/javascript/seeds/examples/product-cards-5/data.js

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

data/app/javascript/seeds/examples/product-cards-5/render.jsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { Heart, ShoppingCart } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+const product = {
+  id: "1",
+  image:
+    "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500",
+  title: "Premium Wireless Headphones",
+  price: 149.99,
+  isFavorite: false,
+};
+
+export default function ProductCard() {
+  const [isAddingToCart, setIsAddingToCart] = useState(false);
+
+  const handleAddToCart = () => {
+    setIsAddingToCart(true);
+    setTimeout(() => setIsAddingToCart(false), 500);
+  };
+
+  return (
+    <Card className="w-full max-w-72 overflow-hidden pt-0 shadow-none">
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        <Image
+          src={product.image}
+          alt={product.title}
+          fill
+          className="object-cover transition-transform duration-300 hover:scale-105"
+        />
+
+        <div className="absolute end-2 top-2">
+          <Button
+            size="icon-sm"
+            variant="secondary"
+            className="rounded-full"
+            aria-label={
+              product.isFavorite ? "Remove from favorites" : "Add to favorites"
+            }
+          >
+            <Heart
+              size={20}
+              className={`transition-all ${
+                product.isFavorite
+                  ? "fill-destructive text-destructive"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            />
+          </Button>
+        </div>
+      </div>
+
+      <CardContent className="flex flex-col gap-3">
+        <h5 className="text-card-foreground line-clamp-2 text-base text-balance">
+          {product.title}
+        </h5>
+
+        <div className="text-foreground text-2xl font-semibold">
+          ${product.price.toFixed(2)}
+        </div>
+
+        <Button
+          onClick={handleAddToCart}
+          disabled={isAddingToCart}
+          className="w-full gap-2"
+          size="sm"
+        >
+          <ShoppingCart size={18} />
+          {isAddingToCart ? "Adding..." : "Add to Cart"}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/product-cards-6/config.json

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

data/app/javascript/seeds/examples/product-cards-6/data.js

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

data/app/javascript/seeds/examples/product-cards-6/render.jsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useState } from "react";
+import { Check, Heart, ShoppingCart } from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+const product = {
+  id: "1",
+  image:
+    "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500",
+  title: "Premium Leather Shoes",
+  price: 129.99,
+  originalPrice: 179.99,
+  colors: [
+    { name: "Black", hex: "#000000" },
+    { name: "Navy", hex: "#001f3f" },
+    { name: "Tan", hex: "#D2B48C" },
+    { name: "Red", hex: "#FF4136" },
+  ],
+  sizes: [
+    { name: "6", available: true },
+    { name: "7", available: true },
+    { name: "8", available: true },
+    { name: "9", available: false },
+    { name: "10", available: true },
+    { name: "11", available: true },
+  ],
+};
+
+export default function ProductCard() {
+  const [selectedColor, setSelectedColor] = useState(product.colors[0]);
+  const [selectedSize, setSelectedSize] = useState(
+    product.sizes.find((s) => s.available) || product.sizes[0],
+  );
+  const [isFavorited, setIsFavorited] = useState(false);
+  const [isAdded, setIsAdded] = useState(false);
+
+  const handleAddToCart = () => {
+    setIsAdded(true);
+    setTimeout(() => setIsAdded(false), 2000);
+  };
+
+  const handleToggleFavorite = () => {
+    const next = !isFavorited;
+    setIsFavorited(next);
+  };
+
+  const savings = product.originalPrice
+    ? product.originalPrice - product.price
+    : 0;
+
+  const savingsPercent = product.originalPrice
+    ? Math.round((savings / product.originalPrice) * 100)
+    : 0;
+
+  return (
+    <Card className="overflow-hidden py-0 shadow-none">
+      <CardContent className="flex flex-1 flex-col justify-between p-0 lg:flex-row">
+        <figure className="relative shrink-0 overflow-hidden md:w-80">
+          <img
+            src={product.image}
+            alt={product.title}
+            className="aspect-3/2 w-full object-cover transition-transform duration-300 hover:scale-105 lg:aspect-auto"
+          />
+
+          {savings > 0 && (
+            <Badge className="absolute start-3 top-3" variant="destructive">
+              Save {savingsPercent}%
+            </Badge>
+          )}
+
+          <div className="absolute end-3 top-3">
+            <Button
+              variant="secondary"
+              size="icon-sm"
+              onClick={handleToggleFavorite}
+              className="bg-background rounded-full"
+            >
+              <Heart
+                size={20}
+                className={cn(
+                  "transition-colors",
+                  isFavorited
+                    ? "fill-red-500 text-red-500"
+                    : "text-muted-foreground hover:text-red-500",
+                )}
+              />
+            </Button>
+          </div>
+        </figure>
+
+        <div className="flex flex-col p-4">
+          <h5 className="mb-2 text-xl font-semibold">{product.title}</h5>
+
+          <div className="mb-4 flex items-baseline gap-2">
+            <span className="text-2xl font-bold">
+              ${product.price.toFixed(2)}
+            </span>
+
+            {product.originalPrice && (
+              <span className="text-muted-foreground line-through">
+                ${product.originalPrice.toFixed(2)}
+              </span>
+            )}
+          </div>
+
+          {/* Colors */}
+          <div className="mb-6">
+            <label className="mb-3 block text-sm">Color</label>
+            <div className="flex items-center flex-wrap gap-2">
+              {product.colors.map((color) => (
+                <Button
+                  key={color.name}
+                  size="icon"
+                  variant="outline"
+                  onClick={() => setSelectedColor(color)}
+                  className={cn(
+                    "size-5 rounded-full border transition-all",
+                    selectedColor.name === color.name
+                      ? "border-neutral-900 ring-1 ring-neutral-900 ring-offset-1"
+                      : "border-neutral-200 hover:border-neutral-400",
+                  )}
+                  style={{ backgroundColor: color.hex }}
+                />
+              ))}
+              <span className="text-muted-foreground text-sm">{selectedColor.name}</span>
+            </div>
+          </div>
+
+          {/* Sizes */}
+          <div className="mb-6">
+            <label className="mb-3 block text-sm">Size</label>
+
+            <div className="flex flex-wrap gap-2">
+              {product.sizes.map((size) => (
+                <Button
+                  key={size.name}
+                  size="icon-sm"
+                  variant={
+                    selectedSize.name === size.name ? "default" : "outline"
+                  }
+                  disabled={!size.available}
+                  onClick={() => size.available && setSelectedSize(size)}
+                  className={cn(
+                    "rounded-lg font-semibold transition-all",
+                    !size.available
+                      ? "cursor-not-allowed border-neutral-200 bg-neutral-100 text-neutral-400"
+                      : "",
+                  )}
+                >
+                  {size.name}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+          <div className="mt-auto">
+            <Button className="w-full" onClick={handleAddToCart}>
+              {isAdded ? (
+                <>
+                  <Check />
+                  Added to Cart
+                </>
+              ) : (
+                <>
+                  <ShoppingCart />
+                  Add to Cart
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/product-cards-7/config.json

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

data/app/javascript/seeds/examples/product-cards-7/data.js

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

data/app/javascript/seeds/examples/product-cards-7/render.jsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Heart, Expand as Expand2, ShoppingCart, Star } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+const product = {
+  discount: "50% Off",
+  image:
+    "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500",
+  alt: "AerOline Pro Chair - Jet Black with Amber Stitch",
+  brand: "AerOline Pro Chair",
+  title: "Jet Black with Amber Stitch",
+  rating: 4.9,
+  currentPrice: 280.0,
+  originalPrice: 560.0,
+  timeLeft: {
+    days: 2,
+    hours: 12,
+    minutes: 48,
+    seconds: 10,
+  },
+};
+
+export default function ProductCard() {
+  const {
+    discount,
+    image,
+    alt,
+    brand,
+    title,
+    rating,
+    currentPrice,
+    originalPrice,
+    timeLeft,
+  } = product;
+
+  const [time, setTime] = useState(timeLeft);
+  const [isFavorite, setIsFavorite] = useState(false);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime((prevTime) => {
+        let { days, hours, minutes, seconds } = prevTime;
+
+        seconds--;
+        if (seconds < 0) {
+          seconds = 59;
+          minutes--;
+          if (minutes < 0) {
+            minutes = 59;
+            hours--;
+            if (hours < 0) {
+              hours = 23;
+              days--;
+            }
+          }
+        }
+
+        return { days, hours, minutes, seconds };
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <Card className="w-full max-w-80 overflow-hidden pt-0 shadow-none">
+      <div className="relative">
+        {discount && (
+          <Badge className="absolute top-3 left-3 z-10 rounded-full bg-amber-700 dark:bg-amber-400">
+            {discount}
+          </Badge>
+        )}
+
+        <div className="absolute top-3 right-3 z-10 flex flex-col gap-3">
+          <Button
+            size="icon-sm"
+            variant="secondary"
+            className="bg-background hover:bg-secondary size-10 rounded-full"
+            onClick={() => setIsFavorite(!isFavorite)}
+            aria-label="Add to favorites"
+          >
+            <Heart
+              fill={isFavorite ? "currentColor" : "none"}
+              stroke={isFavorite ? "currentColor" : "currentColor"}
+            />
+          </Button>
+          <Button
+            size="icon-sm"
+            variant="secondary"
+            className="bg-background hover:bg-secondary size-10 rounded-full"
+            aria-label="Expand view"
+          >
+            <Expand2 />
+          </Button>
+          <Button
+            size="icon-sm"
+            variant="secondary"
+            className="bg-background hover:bg-secondary size-10 rounded-full"
+            aria-label="Add to cart"
+          >
+            <ShoppingCart />
+          </Button>
+        </div>
+
+        <figure>
+          <img
+            src={image}
+            alt={alt}
+            className="aspect-4/3 w-full object-cover"
+          />
+        </figure>
+      </div>
+
+      <CardContent>
+        <div className="relative z-10 -mt-12 mb-6 rounded-xl bg-amber-400 p-4 dark:bg-amber-700">
+          <div className="grid grid-cols-4 gap-2 text-center">
+            <div>
+              <div className="text-foreground text-2xl font-bold tabular-nums">
+                {String(time.days).padStart(2, "0")}
+              </div>
+              <div className="text-foreground/70 text-xs font-medium md:text-sm">
+                Days
+              </div>
+            </div>
+            <div>
+              <div className="text-foreground text-2xl font-bold tabular-nums">
+                {String(time.hours).padStart(2, "0")}
+              </div>
+              <div className="text-foreground/70 text-xs font-medium md:text-sm">
+                Hours
+              </div>
+            </div>
+            <div>
+              <div className="text-foreground text-2xl font-bold tabular-nums">
+                {String(time.minutes).padStart(2, "0")}
+              </div>
+              <div className="text-foreground/70 text-xs font-medium md:text-sm">
+                Mins
+              </div>
+            </div>
+            <div>
+              <div className="text-foreground text-2xl font-bold tabular-nums">
+                {String(time.seconds).padStart(2, "0")}
+              </div>
+              <div className="text-foreground/70 text-xs font-medium md:text-sm">
+                Sec
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-1">
+          <div className="flex items-center justify-between gap-4">
+            <p className="text-muted-foreground text-sm">{brand}</p>
+            <div className="flex shrink-0 items-center gap-1">
+              <Star className="size-4 fill-amber-400 stroke-amber-400" />
+              <span className="text-xs">{rating}</span>
+            </div>
+          </div>
+
+          <h5 className="text-foreground text-base font-bold md:text-lg">
+            {title}
+          </h5>
+
+          <div className="flex items-end gap-1">
+            <span className="text-foreground text-lg font-medium">
+              ${currentPrice.toFixed(2)}
+            </span>
+            <span className="text-muted-foreground mb-0.5 text-sm line-through">
+              ${originalPrice.toFixed(2)}
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/product-list-1/config.json

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

data/app/javascript/seeds/examples/product-list-1/data.js

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

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

@@ -0,0 +1,114 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ChevronRightIcon } from "lucide-react";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const products = [
+  {
+    id: 1,
+    image:
+      "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=80&q=80",
+    name: "Sports Shoes",
+    price: 316,
+    sold: 316,
+    sales: 10,
+  },
+  {
+    id: 2,
+    image:
+      "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=80&q=80",
+    name: "Black T-Shirt",
+    price: 274,
+    sold: 274,
+    sales: 20,
+  },
+  {
+    id: 3,
+    image:
+      "https://images.unsplash.com/photo-1604176354204-9268737828e4?w=80&q=80",
+    name: "Jeans",
+    price: 195,
+    sold: 195,
+    sales: 15,
+  },
+  {
+    id: 4,
+    image:
+      "https://images.unsplash.com/photo-1460353581641-37baddab0fa2?w=80&q=80",
+    name: "Red Sneakers",
+    price: 402,
+    sold: 402,
+    sales: 40,
+  },
+  {
+    id: 5,
+    image:
+      "https://images.unsplash.com/photo-1596870230751-ebdfce98ec42?w=80&q=80",
+    name: "Red Scarf",
+    price: 280,
+    sold: 280,
+    sales: 37,
+  },
+];
+
+export default function CardProductList() {
+  return (
+    <Card className="relative w-full shadow-none md:w-96">
+      <CardHeader>
+        <CardTitle>Best Selling Product</CardTitle>
+        <CardDescription>Top selling products at a glance</CardDescription>
+        <CardAction>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button size="icon-sm" variant="outline">
+                  <ChevronRightIcon />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>View All</TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {products.map((product) => (
+          <Link
+            href="#"
+            key={product.name}
+            className="hover:bg-muted flex items-center justify-between rounded-md border p-0.5 transition-colors"
+          >
+            <div className="flex min-w-0 items-center gap-3">
+              <Image
+                src={product.image}
+                width={40}
+                height={40}
+                className="aspect-square rounded-md object-cover"
+                alt="..."
+                unoptimized
+              />
+              <div className="truncate text-sm">{product.name}</div>
+            </div>
+            <div className="text-sm whitespace-nowrap text-green-600 px-3 py-2">
+              {product.sold} units sold
+            </div>
+          </Link>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/review-cards-1/config.json

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

data/app/javascript/seeds/examples/review-cards-1/data.js

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

data/app/javascript/seeds/examples/review-cards-1/render.jsx

@@ -0,0 +1,54 @@
+import { StarIcon } from "lucide-react";
+
+import { Progress } from "@/components/ui/progress";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function CardReview() {
+  return (
+    <Card className="w-full overflow-hidden shadow-none md:w-[450px]">
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-1 *:size-4">
+            <StarIcon className="fill-orange-400 stroke-orange-400" />
+            <StarIcon className="fill-orange-400 stroke-orange-400" />
+            <StarIcon className="fill-orange-400 stroke-orange-400" />
+            <StarIcon className="stroke-orange-400" />
+            <StarIcon className="stroke-orange-400" />
+          </div>
+          <Button
+            variant="link"
+            className="text-muted-foreground px-0 font-normal"
+          >
+            4.3 (12 reviews)
+          </Button>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <span className="w-20">5 stars</span>
+          <Progress value={70} color="bg-orange-400" />
+          <span>70%</span>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <span className="w-20">4 stars</span>
+          <Progress value={17} color="bg-orange-600" />
+          <span>17%</span>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <span className="w-20">3 stars</span>
+          <Progress value={7} color="bg-yellow-300" />
+          <span>7%</span>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <span className="w-20">2 stars</span>
+          <Progress value={4} color="bg-yellow-600" />
+          <span>4%</span>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <span className="w-20">1 star</span>
+          <Progress value={2} color="bg-red-600" />
+          <span>2%</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/review-cards-2/config.json

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

data/app/javascript/seeds/examples/review-cards-2/data.js

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