jigsaw_engine 0.4.0

data/app/javascript/seeds/examples/social-media-post-3/render.jsx

@@ -0,0 +1,270 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+  BookmarkIcon,
+  CopyIcon,
+  CornerUpRightIcon,
+  EditIcon,
+  FlagIcon,
+  HeartIcon,
+  MessageCircleIcon,
+  MicIcon,
+  MoreHorizontalIcon,
+  PaperclipIcon,
+  Share2Icon,
+  SmileIcon,
+  TrashIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+const postData = {
+  author: {
+    avatar: "https://i.pravatar.cc/150?img=12",
+    name: "Ray Hammond",
+    location: {
+      city: "New-York",
+      country: "United States",
+    },
+    timestamp: "Thursday, Jun 31, 5:50 PM",
+  },
+  content: {
+    text: "I'm so glad to share with you guys some photos from my recent trip to the New-York. This city looks amazing, the buildings, nature, people all are beautiful, i highly recommend to visit this cool place! Also i would like to know what is your favorite place here or what you would like to visit? 🥰",
+    images: [
+      {
+        alt: "Modern skyscrapers from low angle",
+        src: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80",
+      },
+      {
+        alt: "Glass building facade at night",
+        src: "https://images.unsplash.com/photo-1514565131-fce0801e5785?w=800&q=80",
+      },
+    ],
+  },
+  engagement: {
+    likeAvatars: [
+      "https://i.pravatar.cc/150?img=33",
+      "https://i.pravatar.cc/150?img=25",
+      "https://i.pravatar.cc/150?img=44",
+      "https://i.pravatar.cc/150?img=49",
+    ],
+    likes: 245,
+    comments: 8,
+    shares: 0,
+  },
+  comments: [
+    {
+      id: 1,
+      author: {
+        avatar: "https://i.pravatar.cc/150?img=45",
+        name: "Cynthia Henry",
+      },
+      timestamp: "Today at 3:30 PM",
+      text: "Wow, those photos looks amazing, i'm going to visit New-York on next week. Can you recommend some cool locations to visit there? 🙏",
+      likes: 9,
+      replies: 2,
+    },
+  ],
+};
+
+export default function CardComponent() {
+  return (
+    <Card className="w-full max-w-xl shadow-none">
+      <CardHeader className="flex flex-row items-start justify-between gap-3">
+        <div className="flex gap-3">
+          <Avatar className="size-10">
+            <AvatarImage
+              src={postData.author.avatar}
+              alt={`${postData.author.name} avatar`}
+            />
+          </Avatar>
+          <div className="space-y-0.5">
+            <div className="flex items-center gap-1 text-sm">
+              <span className="font-semibold">{postData.author.name}</span>
+              <span className="text-muted-foreground">is at</span>
+              <Link href="#" className="text-blue-500 hover:underline">
+                {postData.author.location.city}
+              </Link>
+            </div>
+            <p className="text-muted-foreground text-xs">
+              {postData.author.timestamp}
+            </p>
+          </div>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon-sm">
+              <MoreHorizontalIcon />
+              <span className="sr-only">More options</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem>
+              <EditIcon />
+              <span>Edit post</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <CopyIcon />
+              <span>Copy link</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <BookmarkIcon />
+              <span>Save post</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive">
+              <FlagIcon />
+              <span>Report</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem variant="destructive">
+              <TrashIcon />
+              <span>Delete</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <p className="text-sm leading-relaxed">{postData.content.text}</p>
+
+        <div className="grid grid-cols-2 gap-2">
+          {postData.content.images.map((image, index) => (
+            <div
+              key={index}
+              className="relative aspect-4/3 overflow-hidden rounded-lg"
+            >
+              <Image
+                src={image.src}
+                alt={image.alt}
+                fill
+                className="object-cover"
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-1">
+            <div className="flex -space-x-2">
+              {postData.engagement.likeAvatars.map((avatar, index) => (
+                <Avatar
+                  key={index}
+                  className="border-background size-7 border-3"
+                >
+                  <AvatarImage src={avatar} alt="User avatar" />
+                </Avatar>
+              ))}
+            </div>
+            <span className="text-muted-foreground text-xs">
+              + {postData.engagement.likes} Likes
+            </span>
+          </div>
+        </div>
+
+        <Separator />
+
+        <div className="flex items-center justify-around">
+          <Button variant="ghost" size="sm">
+            <HeartIcon />
+            <span>Like</span>
+          </Button>
+          <Button variant="ghost" size="sm">
+            <MessageCircleIcon />
+            <span>{postData.engagement.comments} Comments</span>
+          </Button>
+          <Button variant="ghost" size="sm">
+            <Share2Icon />
+            <span>{postData.engagement.shares} Shares</span>
+          </Button>
+        </div>
+
+        <Separator />
+
+        <div className="flex items-center gap-2">
+          <Avatar>
+            <AvatarImage
+              src="https://i.pravatar.cc/150?img=68"
+              alt="Your avatar"
+            />
+          </Avatar>
+          <div className="bg-muted relative flex flex-1 items-center gap-2 rounded-full px-4 py-1">
+            <Input
+              placeholder="Write a comment..."
+              className="border-0 bg-transparent! p-0 focus-visible:ring-0"
+            />
+            <div className="flex items-center gap-1">
+              <Button variant="ghost" size="icon-sm">
+                <PaperclipIcon className="size-4" />
+                <span className="sr-only">Attach file</span>
+              </Button>
+              <Button variant="ghost" size="icon-sm">
+                <MicIcon className="size-4" />
+                <span className="sr-only">Voice message</span>
+              </Button>
+              <Button variant="ghost" size="icon-sm">
+                <SmileIcon className="size-4" />
+                <span className="sr-only">Add emoji</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex-col items-start gap-4">
+        {postData.comments.map((comment) => (
+          <div key={comment.id} className="flex w-full gap-3">
+            <Avatar>
+              <AvatarImage
+                src={comment.author.avatar}
+                alt={`${comment.author.name} avatar`}
+              />
+            </Avatar>
+            <div className="flex-1 space-y-1">
+              <div className="flex items-start justify-between">
+                <div className="space-y-0.5">
+                  <p className="text-sm font-semibold">{comment.author.name}</p>
+                  <p className="text-muted-foreground text-xs">
+                    {comment.timestamp}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-1">
+                    <HeartIcon className="fill-destructive text-destructive size-4" />
+                    <span className="text-sm">{comment.likes}</span>
+                  </div>
+                  <Button variant="ghost" size="icon-sm">
+                    <CornerUpRightIcon className="size-4" />
+                    <span className="sr-only">Reply</span>
+                  </Button>
+                </div>
+              </div>
+              <p className="text-sm leading-relaxed">{comment.text}</p>
+              <Link href="#" className="text-sm text-blue-500 hover:underline">
+                – View {comment.replies} replies
+              </Link>
+            </div>
+          </div>
+        ))}
+
+        <Link href="#" className="text-sm text-blue-500 hover:underline">
+          Show 5 more comments
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}

data/app/javascript/seeds/examples/social-media-post-4/config.json

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

data/app/javascript/seeds/examples/social-media-post-4/data.js

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

data/app/javascript/seeds/examples/social-media-post-4/render.jsx

@@ -0,0 +1,188 @@
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import {
+  BadgeCheckIcon,
+  BookmarkIcon,
+  CopyIcon,
+  EditIcon,
+  FlagIcon,
+  HeartIcon,
+  Link2Icon,
+  MessageCircleIcon,
+  MoreHorizontalIcon,
+  RepeatIcon,
+  TrashIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+const postData = {
+  author: {
+    avatar: "https://i.pravatar.cc/150?img=13",
+    name: "Emma Wilson",
+    username: "@emmawilson",
+    verified: true,
+    timestamp: "15 Jan",
+  },
+  content: {
+    text: "Just discovered this amazing resource for learning Next.js! The interactive examples are super helpful 🔥",
+    link: {
+      url: "https://nextjs.org/learn",
+      preview: {
+        title: "Learn Next.js - Interactive Course | Next.js",
+        description:
+          "Learn Next.js, the React framework for production. Build fast and scalable web applications with our comprehensive tutorial...",
+        image: {
+          src: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&q=80",
+          alt: "Next.js learning dashboard",
+        },
+      },
+    },
+  },
+  engagement: {
+    likes: 142,
+    reposts: 23,
+    comments: 8,
+  },
+};
+
+export default function CardComponent() {
+  return (
+    <div className="w-full max-w-xl space-y-3">
+      <Item className="w-full p-0">
+        <ItemMedia>
+          <Avatar>
+            <AvatarImage
+              src={postData.author.avatar}
+              alt={`${postData.author.name} avatar`}
+            />
+          </Avatar>
+        </ItemMedia>
+        <ItemContent className="gap-0">
+          <div className="flex items-center gap-1.5">
+            <ItemTitle>{postData.author.name}</ItemTitle>
+            {postData.author.verified && (
+              <BadgeCheckIcon className="text-background size-4 fill-yellow-400" />
+            )}
+          </div>
+          <div className="flex items-center gap-1.5">
+            <ItemDescription className="text-xs">
+              {postData.author.username}
+            </ItemDescription>
+            <span className="text-muted-foreground text-xs">·</span>
+            <ItemDescription className="text-xs">
+              {postData.author.timestamp}
+            </ItemDescription>
+          </div>
+        </ItemContent>
+        <ItemActions>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon-sm">
+                <MoreHorizontalIcon />
+                <span className="sr-only">More options</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>
+                <EditIcon />
+                <span>Edit post</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CopyIcon />
+                <span>Copy link</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <BookmarkIcon />
+                <span>Save post</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem variant="destructive">
+                <FlagIcon />
+                <span>Report</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem variant="destructive">
+                <TrashIcon />
+                <span>Delete</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </ItemActions>
+      </Item>
+
+      <div className="space-y-2">
+        <p className="text-sm leading-relaxed">{postData.content.text}</p>
+      </div>
+
+      <Link
+        href={postData.content.link.url}
+        className="bg-muted hover:bg-muted/80 block overflow-hidden rounded-lg border transition-colors"
+      >
+        <div className="flex">
+          <div className="flex flex-1 flex-col justify-between p-4">
+            <div className="space-y-2">
+              <h6 className="leading-tight font-semibold">
+                {postData.content.link.preview.title}
+              </h6>
+              <p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
+                {postData.content.link.preview.description}
+              </p>
+            </div>
+            <div className="text-muted-foreground mt-3 flex items-center gap-1.5 text-xs">
+              <Link2Icon className="size-3" />
+              <span className="truncate">{postData.content.link.url}</span>
+            </div>
+          </div>
+          <div className="relative w-40 shrink-0">
+            <Image
+              src={postData.content.link.preview.image.src}
+              alt={postData.content.link.preview.image.alt}
+              fill
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </Link>
+
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="sm">
+          <HeartIcon />
+          <span className="text-muted-foreground text-sm">
+            {postData.engagement.likes}
+          </span>
+        </Button>
+        <Button variant="ghost" size="sm">
+          <RepeatIcon />
+          <span className="text-muted-foreground text-sm">
+            {postData.engagement.reposts}
+          </span>
+        </Button>
+        <Button variant="ghost" size="sm">
+          <MessageCircleIcon />
+          <span className="text-muted-foreground text-sm">
+            {postData.engagement.comments}
+          </span>
+        </Button>
+        <Button variant="ghost" size="icon-sm" className="ms-auto">
+          <BookmarkIcon />
+          <span className="sr-only">Bookmark</span>
+        </Button>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function CardStat() {
+  return (
+    <Card className="w-full shadow-none md:w-[400px]">
+      <CardHeader>
+        <CardTitle>Sales Overview</CardTitle>
+        <CardDescription>
+          <span className="text-green-600">+20.1%</span> from last month
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="text-2xl font-bold">$42.5k</div>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex items-center gap-2 text-sm">
+            <div className="bg-muted rounded-md px-2 py-1 text-center text-xs">62.2%</div>
+            <span className="text-sm">Orders</span>
+          </div>
+          <div className="flex items-center justify-end gap-2 text-sm">
+            <div className="bg-muted rounded-md px-2 py-1 text-center text-xs">25.5%</div>
+            <span className="text-sm">Visits</span>
+          </div>
+        </div>
+        <div className="flex overflow-hidden rounded-lg">
+          <span className="h-4 bg-lime-400 dark:bg-lime-700" style={{ width: "70%" }}></span>
+          <span className="h-4 bg-indigo-400 dark:bg-indigo-700" style={{ width: "30%" }}></span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,42 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function CardStat() {
+  return (
+    <Card className="w-full shadow-none md:w-[400px]">
+      <CardHeader>
+        <CardTitle>Website Analytics</CardTitle>
+        <CardDescription>
+          Total <span className="text-green-600">28.5%</span> conversion rate
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="flex items-center gap-2">
+            <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">432</div>
+            <span className="text-sm">Direct</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">216</div>
+            <span className="text-sm">Organic</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">29%</div>
+            <span className="text-sm">Sessions</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">2.3K</div>
+            <span className="text-sm">Page Views</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">1.6K</div>
+            <span className="text-sm">Leads</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="bg-muted w-12 rounded-md px-2 py-1 text-center text-xs">8%</div>
+            <span className="text-sm">Conversions</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,114 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const pipelineData = [
+  {
+    id: "lead",
+    name: "Lead",
+    count: 235,
+    value: 420500,
+    color: "bg-[var(--chart-1)]",
+  },
+  {
+    id: "qualified",
+    name: "Qualified",
+    count: 146,
+    value: 267800,
+    color: "bg-[var(--chart-2)]",
+  },
+  {
+    id: "proposal",
+    name: "Proposal",
+    count: 84,
+    value: 192400,
+    color: "bg-[var(--chart-3)]",
+  },
+  {
+    id: "negotiation",
+    name: "Negotiation",
+    count: 52,
+    value: 129600,
+    color: "bg-[var(--chart-4)]",
+  },
+  {
+    id: "closed",
+    name: "Closed Won",
+    count: 36,
+    value: 87200,
+    color: "bg-[var(--chart-5)]",
+  },
+];
+
+const totalValue = pipelineData.reduce((sum, stage) => sum + stage.value, 0);
+const totalCount = pipelineData.reduce((sum, stage) => sum + stage.count, 0);
+
+export default function CardStat() {
+  return (
+    <Card className="w-full shadow-none md:w-[400px]">
+      <CardHeader>
+        <CardTitle>Sales Pipeline</CardTitle>
+        <CardDescription>Current deals in your sales pipeline.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <TooltipProvider>
+          <div className="mb-6 flex h-4 w-full overflow-hidden rounded-full">
+            {pipelineData.map((stage) => (
+              <Tooltip key={stage.id}>
+                <TooltipTrigger asChild>
+                  <div
+                    className={`${stage.color} h-full`}
+                    style={{ width: `${(stage.value / totalValue) * 100}%` }}
+                  ></div>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <div className="mb-1 text-sm font-medium">{stage.name}</div>
+                  <div className="text-xs opacity-80">{stage.count} deals</div>
+                  <div className="text-xs opacity-80">
+                    ${stage.value.toLocaleString()}
+                  </div>
+                </TooltipContent>
+              </Tooltip>
+            ))}
+          </div>
+        </TooltipProvider>
+
+        <div className="space-y-4">
+          {pipelineData.map((stage) => (
+            <div key={stage.id} className="flex items-center gap-4">
+              <div className={`h-3 w-3 rounded-full ${stage.color}`}></div>
+              <div className="flex flex-1 items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">{stage.name}</p>
+                  <p className="text-muted-foreground text-xs">
+                    {stage.count} deals · ${stage.value.toLocaleString()}
+                  </p>
+                </div>
+                <div className="flex w-24 items-center gap-2">
+                  <Progress
+                    value={(stage.count / totalCount) * 100}
+                    className="h-2"
+                  />
+                  <span className="text-muted-foreground w-10 text-right text-xs">
+                    {Math.round((stage.value / totalValue) * 100)}%
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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