jigsaw_engine 0.4.0

data/app/javascript/seeds/examples/chat-bubbles-4/render.jsx

@@ -0,0 +1,169 @@
+import { PlusIcon } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import Link from "next/link";
+
+const users = [
+  {
+    name: "Sofia Chen",
+    email: "sofia.chen@email.com",
+    avatar: "https://i.pravatar.cc/150?img=1",
+    last_message: {
+      body: "Can we reschedule for tomorrow?",
+      date: "2m ago",
+      unread_message_count: 1,
+    },
+  },
+  {
+    name: "Marcus Webb",
+    email: "marcus.webb@email.com",
+    avatar: "https://i.pravatar.cc/150?img=3",
+    last_message: {
+      body: "Thanks, that works for me.",
+      date: "15m ago",
+      unread_message_count: 0,
+    },
+  },
+  {
+    name: "Priya Sharma",
+    email: "priya.sharma@email.com",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    last_message: {
+      body: "I've sent the files over.",
+      date: "1h ago",
+      unread_message_count: 2,
+    },
+  },
+  {
+    name: "James Okonkwo",
+    email: "j.okonkwo@email.com",
+    avatar: "https://i.pravatar.cc/150?img=12",
+    last_message: {
+      body: "Let me check and get back to you.",
+      date: "Yesterday",
+      unread_message_count: 0,
+    },
+  },
+  {
+    name: "Elena Vasquez",
+    email: "elena.v@email.com",
+    avatar: "https://i.pravatar.cc/150?img=9",
+    last_message: {
+      body: "The meeting link is in the calendar.",
+      date: "Yesterday",
+      unread_message_count: 0,
+    },
+  },
+  {
+    name: "Alex Turner",
+    email: "alex.turner@email.com",
+    avatar: "https://i.pravatar.cc/150?img=11",
+    last_message: {
+      body: "Sure, no problem at all.",
+      date: "Mon",
+      unread_message_count: 0,
+    },
+  },
+  {
+    name: "Yuki Tanaka",
+    email: "yuki.tanaka@email.com",
+    avatar: "https://i.pravatar.cc/150?img=16",
+    last_message: {
+      body: "Looking forward to the demo.",
+      date: "Mon",
+      unread_message_count: 0,
+    },
+  },
+] as const;
+
+export default function ChatCard() {
+  return (
+    <>
+      <Card className="pb-0 shadow-none md:w-96">
+        <CardHeader>
+          <CardTitle>Chats</CardTitle>
+          <CardAction>
+            <TooltipProvider delayDuration={0}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="icon-sm"
+                    variant="outline"
+                    className="-mt-2 rounded-full"
+                  >
+                    <PlusIcon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent sideOffset={10}>New Chat</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </CardAction>
+        </CardHeader>
+        <CardContent className="px-0">
+          <form className="mb-4 flex w-full items-center space-x-2 px-6">
+            <Input
+              placeholder="Search chats..."
+              className="flex-1"
+              autoComplete="off"
+            />
+          </form>
+          <ScrollArea className="h-80">
+            <div className="divide-y">
+              {users.map((user, index) => (
+                <Link
+                  href="#"
+                  key={index}
+                  className="group hover:bg-muted/50 relative flex min-w-0 cursor-pointer items-center gap-3 px-6 py-3"
+                >
+                  <Avatar>
+                    <AvatarImage src={user.avatar} />
+                    <AvatarFallback>
+                      {user.name
+                        .split(" ")
+                        .map((n: any) => n[0])
+                        .join("")}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="min-w-0 grow">
+                    <div className="flex justify-between">
+                      <span className="text-sm font-medium">{user.name}</span>
+                      <span className="text-muted-foreground text-xs">
+                        {user.last_message.date}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <span className="text-muted-foreground truncate text-start text-sm">
+                        {user.last_message.body}
+                      </span>
+                      {user.last_message.unread_message_count ? (
+                        <div className="ms-auto flex size-5 shrink-0 items-center justify-center rounded-full bg-green-500 text-xs text-white dark:bg-green-800">
+                          {user.last_message.unread_message_count}
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    </>
+  );
+}

data/app/javascript/seeds/examples/payment-methods-1/config.json

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

data/app/javascript/seeds/examples/payment-methods-1/data.js

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

data/app/javascript/seeds/examples/payment-methods-1/render.jsx

@@ -0,0 +1,128 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@/components/ui/select";
+
+import { Icons } from "./icons";
+
+export default function CardPaymentMethod() {
+  return (
+    <Card className="w-full md:w-96 shadow-none">
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>Add a new payment method to your account.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
+          <div>
+            <RadioGroupItem value="card" id="card" className="peer sr-only" aria-label="Card" />
+            <Label
+              htmlFor="card"
+              className="border-muted hover:bg-muted hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border bg-transparent p-4">
+              <Icons.card className="mb-3 size-6" />
+              Card
+            </Label>
+          </div>
+
+          <div>
+            <RadioGroupItem
+              value="paypal"
+              id="paypal"
+              className="peer sr-only"
+              aria-label="Paypal"
+            />
+            <Label
+              htmlFor="paypal"
+              className="border-muted hover:bg-muted hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border bg-transparent p-4">
+              <Icons.paypal className="mb-3 size-6" />
+              Paypal
+            </Label>
+          </div>
+
+          <div>
+            <RadioGroupItem value="apple" id="apple" className="peer sr-only" aria-label="Apple" />
+            <Label
+              htmlFor="apple"
+              className="border-muted hover:bg-muted hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex flex-col items-center justify-between rounded-md border bg-transparent p-4">
+              <Icons.apple className="mb-3 size-6" />
+              Apple
+            </Label>
+          </div>
+        </RadioGroup>
+        <div className="grid gap-2">
+          <Label htmlFor="name">Name on the card</Label>
+          <Input id="name" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="city">City</Label>
+          <Input id="city" placeholder="" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="number">Card number</Label>
+          <Input id="number" placeholder="" />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="month">Expires</Label>
+            <Select>
+              <SelectTrigger className="w-full" id="month" aria-label="Month">
+                <SelectValue placeholder="Month" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">January</SelectItem>
+                <SelectItem value="2">February</SelectItem>
+                <SelectItem value="3">March</SelectItem>
+                <SelectItem value="4">April</SelectItem>
+                <SelectItem value="5">May</SelectItem>
+                <SelectItem value="6">June</SelectItem>
+                <SelectItem value="7">July</SelectItem>
+                <SelectItem value="8">August</SelectItem>
+                <SelectItem value="9">September</SelectItem>
+                <SelectItem value="10">October</SelectItem>
+                <SelectItem value="11">November</SelectItem>
+                <SelectItem value="12">December</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="year">Year</Label>
+            <Select>
+              <SelectTrigger className="w-full" id="year" aria-label="Year">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.from({ length: 10 }, (_, i) => (
+                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
+                    {new Date().getFullYear() + i}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cvc">CVC</Label>
+            <Input id="cvc" placeholder="CVC" />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Pay</Button>
+      </CardFooter>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/payment-methods-2/config.json

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

data/app/javascript/seeds/examples/payment-methods-2/data.js

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

data/app/javascript/seeds/examples/payment-methods-2/render.jsx

@@ -0,0 +1,80 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+import { Icons } from "./icons";
+
+export default function CardPaymentMethod() {
+  return (
+    <Card className="w-full shadow-none md:w-96">
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>
+          Add a new payment method to your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <RadioGroup defaultValue="card" className="gap-3">
+          <div>
+            <RadioGroupItem
+              value="card"
+              id="card"
+              className="peer sr-only"
+              aria-label="Card"
+            />
+            <Label
+              htmlFor="card"
+              className="hover:bg-muted hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex items-center justify-between rounded-md border bg-transparent p-4"
+            >
+              Card
+              <Icons.card className="size-6" />
+            </Label>
+          </div>
+
+          <div>
+            <RadioGroupItem
+              value="paypal"
+              id="paypal"
+              className="peer sr-only"
+              aria-label="Paypal"
+            />
+            <Label
+              htmlFor="paypal"
+              className="hover:bg-muted hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex items-center justify-between rounded-md border bg-transparent p-4"
+            >
+              Paypal
+              <Icons.paypal className="size-6" />
+            </Label>
+          </div>
+
+          <div>
+            <RadioGroupItem
+              value="apple"
+              id="apple"
+              className="peer sr-only"
+              aria-label="Apple"
+            />
+            <Label
+              htmlFor="apple"
+              className="hover:bg-muted hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary flex items-center justify-between rounded-md border bg-transparent p-4"
+            >
+              Apple
+              <Icons.apple className="size-6" />
+            </Label>
+          </div>
+        </RadioGroup>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Pay</Button>
+      </CardFooter>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/payment-methods-3/config.json

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

data/app/javascript/seeds/examples/payment-methods-3/data.js

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

data/app/javascript/seeds/examples/payment-methods-3/render.jsx

@@ -0,0 +1 @@
+

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

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

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

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

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

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import Image from "next/image";
+import { HeartIcon, PlusIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+
+const product = {
+  name: "Red Hat",
+  href: "#",
+  image: "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500",
+  price: "$28",
+  category: "Clothing",
+};
+
+export default function ProductCard() {
+  return (
+    <div className="group relative w-full max-w-72 space-y-4">
+      <Link href={product.href} className="block">
+        <figure className="group-hover:opacity-90">
+          <Image
+            className="aspect-square w-full rounded-lg"
+            src={product.image}
+            width={300}
+            height={500}
+            alt={product.name}
+            unoptimized
+          />
+        </figure>
+      </Link>
+      <div className="flex justify-between">
+        <div>
+          <h3 className="text-lg font-medium">{product.name}</h3>
+          <p className="text-muted-foreground text-sm">{product.category}</p>
+        </div>
+        <p className="text-lg font-medium">{product.price}</p>
+      </div>
+      <ButtonGroup className="w-full">
+        <Button variant="outline" size="icon">
+          <HeartIcon />
+        </Button>
+        <Button variant="outline" className="grow">
+          <PlusIcon /> Add to Card
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,53 @@
+import Link from "next/link";
+import Image from "next/image";
+import { HeartIcon, PlusIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+
+const productData = {
+  name: "Red Hat",
+  href: "#",
+  image: "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500",
+  price: "$28",
+  category: "Clothing"
+};
+
+export default function ProductCard() {
+  return (
+    <Card className="relative gap-0 space-y-4 overflow-hidden p-0 w-full max-w-72 shadow-none">
+      <Link href={productData.href} className="block">
+        <figure>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="absolute end-3 top-3 rounded-full bg-white/70 dark:text-black">
+            <HeartIcon className="size-4" />
+          </Button>
+          <Image
+            className="aspect-square w-full"
+            src={productData.image}
+            width={300}
+            height={500}
+            alt={productData.name}
+            unoptimized
+          />
+        </figure>
+      </Link>
+      <CardContent>
+        <div className="flex justify-between">
+          <div>
+            <h3 className="text-lg font-medium">{productData.name}</h3>
+            <p className="text-muted-foreground text-sm">{productData.category}</p>
+          </div>
+          <p className="text-lg font-medium">{productData.price}</p>
+        </div>
+      </CardContent>
+      <CardFooter className="border-t p-0!">
+        <Button variant="ghost" className="w-full">
+          <PlusIcon /> Add to Card
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,102 @@
+import Image from "next/image";
+import { Star, ShoppingCartIcon, HeartIcon, EyeIcon } from "lucide-react";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const productData = {
+  id: "1",
+  name: "Red Hat",
+  description:
+    "Decor Wooden Stool, a stylish, versatile piece with natural wood finish.",
+  price: 28.99,
+  image: "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500",
+  category: "Clothing",
+  rating: 4.5,
+  inStock: true,
+};
+
+export default function ProductCard() {
+  return (
+    <Card className="group w-full max-w-96 gap-0 overflow-hidden pt-0 shadow-none">
+      <figure className="relative mb-4 aspect-4/3 w-full">
+        <Image
+          src={productData.image}
+          alt={productData.name}
+          layout="fill"
+          objectFit="cover"
+          unoptimized
+        />
+        <Badge variant="secondary" className="absolute top-3 right-3">
+          {productData.category}
+        </Badge>
+
+        <div className="absolute right-3 bottom-3 flex gap-2 opacity-0 transition-opacity group-hover:opacity-100">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button size="icon" variant="outline">
+                  <HeartIcon />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Add to Wishlist</p>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button size="icon" variant="outline">
+                  <EyeIcon />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>View Details</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </figure>
+      <CardContent className="space-y-4">
+        <div>
+          <div className="text-2xl font-bold">{productData.name}</div>
+          <div className="mt-2 flex items-center gap-1">
+            {[...Array(5)].map((_, i) => (
+              <Star
+                key={i}
+                className={`size-4 ${
+                  i < Math.floor(productData.rating)
+                    ? "fill-current text-yellow-400"
+                    : "text-gray-300"
+                }`}
+              />
+            ))}
+            <span className="text-muted-foreground ml-2 text-xs">
+              ({productData.rating})
+            </span>
+          </div>
+        </div>
+        <p className="text-muted-foreground text-sm">
+          {productData.description}
+        </p>
+        <div className="flex items-center justify-between">
+          <span className="text-lg font-semibold lg:text-2xl">
+            ${productData.price.toFixed(2)}
+          </span>
+          <Badge variant={productData.inStock ? "outline" : "destructive"}>
+            {productData.inStock ? "In Stock" : "Out of Stock"}
+          </Badge>
+        </div>
+        <Button variant="secondary" className="w-full">
+          <ShoppingCartIcon /> Add to Cart
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,40 @@
+import Image from "next/image";
+
+const product = {
+  id: 1,
+  name: "Sweat polar",
+  href: "#",
+  imageSrc:
+    "https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500",
+  imageAlt: "Front of men's Basic Tee in black.",
+  price: "$35",
+  color: "Black",
+};
+
+export default function ProductCard() {
+  return (
+    <div className="group relative w-full max-w-72 space-y-4">
+      <figure className="w-full overflow-hidden group-hover:opacity-75">
+        <Image
+          alt={product.imageAlt}
+          src={product.imageSrc}
+          width={300}
+          height={300}
+          className="w-full object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </figure>
+      <div className="flex justify-between">
+        <div>
+          <h5 className="font-medium">
+            <a href={product.href}>
+              <span aria-hidden="true" className="absolute inset-0" />
+              {product.name}
+            </a>
+          </h5>
+          <p className="text-muted-foreground text-sm">{product.color}</p>
+        </div>
+        <p className="font-medium">{product.price}</p>
+      </div>
+    </div>
+  );
+}

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

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