jigsaw_engine 0.4.0

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

@@ -0,0 +1,78 @@
+import Image from "next/image";
+import { Clock } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Link from "next/link";
+
+const data = {
+  title: "Mastering TypeScript: Advanced Patterns and Best Practices",
+  excerpt:
+    "Explore advanced TypeScript patterns, generics, and type utilities that will take your code quality to the next level. Real-world examples included.",
+  coverImage:
+    "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=800&q=80",
+  author: {
+    name: "Michael Rodriguez",
+    avatar: "https://i.pravatar.cc/150?img=12",
+  },
+  readTime: "7 min",
+  category: "Development",
+  commentCount: 18,
+};
+
+export default function BlogCard() {
+  return (
+    <Card className="w-full max-w-sm overflow-hidden pt-0 shadow-none">
+      <Link href="#">
+        <figure className="relative aspect-video w-full @min-[theme(--breakpoint-lg)]:w-1/3">
+          <Image
+            src={data.coverImage}
+            fill
+            className="object-cover md:h-full"
+            alt={data.title}
+          />
+        </figure>
+      </Link>
+
+      <CardContent className="space-y-4">
+        <div className="flex items-start justify-between">
+          <Badge variant="outline">{data.category}</Badge>
+          <div className="text-muted-foreground flex items-center text-xs">
+            <Clock className="me-1 size-3" />
+            {data.readTime} read
+          </div>
+        </div>
+
+        <h4 className="text-xl">{data.title}</h4>
+
+        <p className="text-muted-foreground text-sm">{data.excerpt}</p>
+
+        <div className="flex items-center space-x-3">
+          <Avatar>
+            <AvatarImage src={data.author.avatar} alt={data.author.name} />
+            <AvatarFallback>
+              {data.author.name
+                .split(" ")
+                .map((n) => n[0])
+                .join("")}
+            </AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <p className="text-sm leading-none font-medium">
+              {data.author.name}
+            </p>
+            <div className="text-muted-foreground flex items-center text-xs">
+              Blogger
+            </div>
+          </div>
+        </div>
+
+        <Button variant="outline" size="sm" className="w-full">
+          Read More
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,80 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { Item, ItemContent, ItemMedia, ItemTitle } from "@/components/ui/item";
+import { Separator } from "@/components/ui/separator";
+import Image from "next/image";
+import Link from "next/link";
+
+const blogPosts = [
+  {
+    id: 1,
+    author: {
+      name: "Emma Thompson",
+      avatar: "https://i.pravatar.cc/150?img=45",
+    },
+    title: "Building Scalable React Applications with Modern Architecture",
+    category: "Development",
+    date: "Jan 15, 2025",
+    thumbnail:
+      "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&q=80",
+  },
+];
+
+export default function BlogCard() {
+  return (
+    <Card className="w-full max-w-xl py-0 shadow-none">
+      <CardContent className="space-y-0 p-0">
+        {blogPosts.map((post, index) => (
+          <div key={post.id}>
+            <Item className="w-full items-center gap-4 py-4">
+              <ItemContent className="flex-1 gap-3">
+                <div className="flex items-center gap-2">
+                  <Avatar className="size-7">
+                    <AvatarImage
+                      src={post.author.avatar}
+                      alt={post.author.name}
+                    />
+                  </Avatar>
+                  <Link
+                    href="#"
+                    className="text-sm text-blue-500 hover:underline"
+                  >
+                    {post.author.name}
+                  </Link>
+                </div>
+                <Link href="#">
+                  <ItemTitle className="text-xl font-semibold hover:underline">
+                    {post.title}
+                  </ItemTitle>
+                </Link>
+                <div className="text-muted-foreground flex items-center gap-2 text-xs">
+                  <Link
+                    href="#"
+                    className="hover:text-foreground hover:underline"
+                  >
+                    {post.category}
+                  </Link>
+                  <span>•</span>
+                  <span>{post.date}</span>
+                </div>
+              </ItemContent>
+              <ItemMedia className="shrink-0">
+                <Link href="#" className="block">
+                  <div className="relative size-24 overflow-hidden rounded-md">
+                    <Image
+                      src={post.thumbnail}
+                      alt={post.title}
+                      fill
+                      className="object-cover"
+                    />
+                  </div>
+                </Link>
+              </ItemMedia>
+            </Item>
+            {index < blogPosts.length - 1 && <Separator />}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { Card } from "@/components/ui/card";
+import Image from "next/image";
+import Link from "next/link";
+
+const data = {
+  image:
+    "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=800&q=80",
+  category: "Technology",
+  title: "The Future of Web Development in 2025",
+};
+
+export default function BlogCard() {
+  return (
+    <Card className="group relative overflow-hidden p-0 shadow-none">
+      <Link href="#" className="block">
+        <div className="relative aspect-4/3 h-64 w-full">
+          <Image
+            src={data.image}
+            alt={data.title}
+            fill
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+          <div className="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent" />
+          <div className="absolute bottom-0 left-0 p-6 text-white">
+            <p className="mb-2 text-sm font-medium">{data.category}</p>
+            <h4 className="text-2xl leading-tight">{data.title}</h4>
+          </div>
+        </div>
+      </Link>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/chat-bubbles-1/config.json

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

data/app/javascript/seeds/examples/chat-bubbles-1/data.js

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

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

@@ -0,0 +1,154 @@
+"use client";
+
+import * as React from "react";
+import {
+  BanIcon,
+  EllipsisIcon,
+  SendIcon,
+  Share2,
+  TrashIcon,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+
+const messagesData = [
+  {
+    id: 1,
+    role: "agent",
+    content: "Hi, how can I help you today?",
+  },
+  {
+    id: 2,
+    role: "user",
+    content: "Hey, I'm having trouble with my account.",
+  },
+  {
+    id: 3,
+    role: "agent",
+    content: "What seems to be the problem?",
+  },
+  {
+    id: 4,
+    role: "user",
+    content: "I can't log in.",
+  },
+];
+
+type Message = (typeof messagesData)[number];
+
+export default function ChatCard() {
+  const [messages, setMessages] = React.useState<Message[]>(messagesData);
+  const [input, setInput] = React.useState("");
+  const inputLength = input.trim().length;
+
+  return (
+    <Card className="md:w-96 shadow-none">
+      <CardHeader>
+        <CardTitle className="flex items-center space-x-4">
+          <Avatar>
+            <AvatarImage src="/images/avatars/01.png" alt="avatar" />
+            <AvatarFallback>TB</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <div className="text-sm leading-none font-medium">Toby Belhome</div>
+            <div className="text-muted-foreground text-xs">
+              c@shadcnuikit.com
+            </div>
+          </div>
+        </CardTitle>
+        <CardAction>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="icon" variant="ghost" className="-mt-2">
+                <EllipsisIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>
+                <UserIcon size={16} aria-hidden="true" />
+                View Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Share2 size={16} aria-hidden="true" />
+                Share
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BanIcon size={16} aria-hidden="true" />
+                Block
+              </DropdownMenuItem>
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon size={16} aria-hidden="true" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={cn(
+                "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
+                message.role === "user"
+                  ? "bg-primary text-primary-foreground ml-auto"
+                  : "bg-muted",
+              )}
+            >
+              {message.content}
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (inputLength === 0) return;
+            setMessages([
+              ...messages,
+              {
+                id: Math.random() * 10,
+                role: "user",
+                content: input,
+              },
+            ]);
+            setInput("");
+          }}
+          className="flex w-full items-center space-x-2"
+        >
+          <Input
+            id="message"
+            placeholder="Type your message..."
+            className="flex-1"
+            autoComplete="off"
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+          />
+          <Button type="submit" size="icon" disabled={inputLength === 0}>
+            <SendIcon />
+          </Button>
+        </form>
+      </CardFooter>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/chat-bubbles-2/config.json

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

data/app/javascript/seeds/examples/chat-bubbles-2/data.js

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

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

@@ -0,0 +1,88 @@
+import {
+  BanIcon,
+  EllipsisIcon,
+  Send,
+  Share2,
+  TrashIcon,
+  UserIcon,
+} from "lucide-react";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import MessageListItem from "./message-list-item";
+
+import { messagesData } from "./data";
+
+export default function ChatCard() {
+  return (
+    <Card className="shadow-none md:w-96">
+      <CardHeader>
+        <CardTitle>Toby Belhome</CardTitle>
+        <CardAction>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="icon-sm" variant="ghost" className="-mt-2">
+                <EllipsisIcon />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>
+                <UserIcon size={16} aria-hidden="true" />
+                View Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Share2 size={16} aria-hidden="true" />
+                Share
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BanIcon size={16} aria-hidden="true" />
+                Block
+              </DropdownMenuItem>
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon size={16} aria-hidden="true" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-96">
+          <div className="space-y-4">
+            {messagesData.map((message) => (
+              <MessageListItem key={message.id} message={message} />
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+      <CardFooter>
+        <form className="flex w-full items-center space-x-2">
+          <Input
+            id="message"
+            placeholder="Type your message..."
+            className="flex-1"
+            autoComplete="off"
+          />
+          <Button type="submit" variant="outline" size="icon">
+            <Send />
+          </Button>
+        </form>
+      </CardFooter>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/chat-bubbles-3/config.json

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

data/app/javascript/seeds/examples/chat-bubbles-3/data.js

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

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

@@ -0,0 +1,90 @@
+import { Check, CheckCheck, EllipsisIcon } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+
+interface Message {
+  id: number;
+  content: string;
+  sender: string;
+  avatar: string;
+  timestamp: string;
+  status: "sent" | "delivered" | "read";
+  type: "sent" | "received";
+}
+
+export default function ChatCard() {
+  const message: Message = {
+    id: 1,
+    content:
+      "I'm doing great! Just finished working on that new feature we discussed.",
+    sender: "You",
+    avatar: "https://i.pravatar.cc/150?img=1",
+    timestamp: "05:30 AM",
+    status: "read",
+    type: "sent",
+  };
+
+  return (
+    <div className="flex gap-4 md:w-96">
+      <Avatar>
+        <AvatarImage src={message.avatar} alt={message.sender} />
+        <AvatarFallback>{message.sender[0]}</AvatarFallback>
+      </Avatar>
+      <div
+        className={cn(
+          "group flex flex-col space-y-1",
+          message.type === "sent" && "items-end",
+        )}
+      >
+        <div
+          className={cn(
+            "rounded-lg px-3 py-2",
+            message.type === "sent"
+              ? "bg-primary text-primary-foreground rounded-br-none"
+              : "bg-muted rounded-bl-none",
+          )}
+        >
+          <p className="text-sm">{message.content}</p>
+        </div>
+        <div className="flex items-center gap-1 px-2">
+          <span className="text-muted-foreground text-xs">
+            {message.timestamp}
+          </span>
+          {message.type === "sent" && (
+            <div className="text-muted-foreground text-xs">
+              {message.status === "sent" && <Check className="size-3" />}
+              {message.status === "delivered" && (
+                <CheckCheck className="size-3" />
+              )}
+              {message.status === "read" && (
+                <CheckCheck className="size-3 text-blue-500" />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      <div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon" variant="ghost">
+              <EllipsisIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>Forward</DropdownMenuItem>
+            <DropdownMenuItem>Reply</DropdownMenuItem>
+            <DropdownMenuItem>Share</DropdownMenuItem>
+            <DropdownMenuItem>Delete from me</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/examples/chat-bubbles-4/config.json

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

data/app/javascript/seeds/examples/chat-bubbles-4/data.js

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