jigsaw_engine 0.4.0

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

@@ -0,0 +1,68 @@
+import { Quote, Star as StarIcon } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+
+const data = {
+  id: 1,
+  review:
+    "I use the shadcn ui kit pretty often and it’s crazy what people build with it, good job 👏🏻",
+  rating: 4.5,
+  customerName: "Toby Belhome",
+  customerTitle: "Frontend Developer, Apple",
+};
+
+export default function ReviewCard() {
+  const renderStars = (rating: number) => {
+    const stars = [];
+    const fullStars = Math.floor(rating);
+    const hasHalfStar = rating % 1 !== 0;
+
+    for (let i = 0; i < 5; i++) {
+      if (i < fullStars) {
+        stars.push(
+          <StarIcon
+            key={i}
+            className="size-4 fill-orange-400 stroke-orange-400"
+          />,
+        );
+      } else if (i === fullStars && hasHalfStar) {
+        stars.push(
+          <div key={i} className="relative size-4">
+            <StarIcon className="size-4 stroke-orange-400" />
+            <div className="absolute inset-0 w-1/2 overflow-hidden">
+              <StarIcon className="size-4 fill-orange-400 stroke-orange-400" />
+            </div>
+          </div>,
+        );
+      } else {
+        stars.push(<StarIcon key={i} className="size-4 stroke-orange-400" />);
+      }
+    }
+
+    return stars;
+  };
+
+  return (
+    <Card className="w-full shadow-none hover:-translate-y-1 md:w-[450px]">
+      <CardContent className="space-y-4">
+        <div>
+          <Quote className="h-10 w-10 opacity-20" />
+        </div>
+
+        <blockquote className="text-muted-foreground mb-6 leading-relaxed">
+          {data.review}
+        </blockquote>
+
+        <div className="flex items-center gap-1">
+          {renderStars(data.rating)}
+        </div>
+
+        <div className="space-y-1">
+          <div className="font-bold">
+            {data.customerName}
+          </div>
+          <p className="text-muted-foreground text-sm">{data.customerTitle}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,101 @@
+import { Star as StarIcon } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+
+const data = {
+  averageRating: 4.8,
+  totalReviews: 138,
+  ratings: [
+    { stars: 5, count: 106 },
+    { stars: 4, count: 32 },
+    { stars: 3, count: 0 },
+    { stars: 2, count: 0 },
+    { stars: 1, count: 0 },
+  ],
+};
+
+export default function ReviewCard() {
+  const renderStars = (rating: number) => {
+    const stars = [];
+    const fullStars = Math.floor(rating);
+    const hasHalfStar = rating % 1 !== 0;
+
+    for (let i = 0; i < 5; i++) {
+      if (i < fullStars) {
+        stars.push(
+          <StarIcon
+            key={i}
+            className="size-4 fill-orange-400 stroke-orange-400"
+          />,
+        );
+      } else if (i === fullStars && hasHalfStar) {
+        stars.push(
+          <div key={i} className="relative size-4">
+            <StarIcon className="size-4 stroke-orange-400" />
+            <div className="absolute inset-0 w-1/2 overflow-hidden">
+              <StarIcon className="size-4 fill-orange-400 stroke-orange-400" />
+            </div>
+          </div>,
+        );
+      } else {
+        stars.push(<StarIcon key={i} className="size-4 stroke-orange-400" />);
+      }
+    }
+
+    return stars;
+  };
+
+  return (
+    <Card className="w-full shadow-none md:w-[450px]">
+      <CardContent className="space-y-6">
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="bg-muted inline-flex flex-col space-y-1 rounded-md p-4">
+              <div className="flex gap-1">
+                <span className="text-2xl font-bold">{data.averageRating}</span>
+              </div>
+              <div className="text-muted-foreground text-xs">
+                Average rating
+              </div>
+            </div>
+            <div className="bg-muted inline-flex flex-col space-y-1 rounded-md p-4">
+              <div className="flex gap-1">
+                <span className="text-2xl font-bold">1.4k</span>
+              </div>
+              <div className="text-muted-foreground text-xs">Reviews</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <h5 className="mb-4 flex justify-between text-lg font-semibold">
+            Reviews{" "}
+            <div className="flex gap-1">{renderStars(data.averageRating)}</div>
+          </h5>
+          {data.ratings
+            .sort((a, b) => b.stars - a.stars)
+            .map(({ stars, count }, i) => {
+              const percentage =
+                data.totalReviews > 0 ? (count / data.totalReviews) * 100 : 0;
+
+              return (
+                <div key={stars} className="flex items-center gap-4">
+                  <span className="text-muted-foreground inline-block w-3 text-sm">
+                    {stars}
+                  </span>
+                  <Progress value={percentage} />
+
+                  <span className="text-muted-foreground min-w-8 text-end text-xs">
+                    {count}
+                  </span>
+                </div>
+              );
+            })}
+        </div>
+
+        <Button className="w-full">Write a Review</Button>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,162 @@
+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 {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item";
+import {
+  BookmarkIcon,
+  CopyIcon,
+  EditIcon,
+  FlagIcon,
+  HeartIcon,
+  MessageCircleIcon,
+  MoreHorizontalIcon,
+  ShareIcon,
+  TrashIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+const postData = {
+  author: {
+    avatar: "https://github.com/shadcn.png",
+    name: "shadcn",
+    username: "@shadcn",
+  },
+  content: {
+    description:
+      "Just shipped a new design system update! 🚀 Excited to share the improvements we've made to accessibility and theming.",
+    hashtags: ["#React", "#DesignSystem", "#OpenSource"],
+    image: {
+      alt: "Code editor with React components",
+      src: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80",
+    },
+    title: "Building Modern UI Components",
+  },
+};
+
+export default function CardComponent() {
+  return (
+    <Card className="w-full max-w-sm gap-0 overflow-hidden py-0 shadow-none">
+      <CardHeader className="-mr-1 flex flex-row items-center justify-between py-2.5">
+        <Item className="w-full gap-2.5 p-0">
+          <ItemMedia>
+            <Image
+              src={postData.author.avatar}
+              className="bg-secondary h-8 w-8 rounded-full object-contain"
+              alt={`${postData.author.name} profile`}
+              height={32}
+              width={32}
+            />
+          </ItemMedia>
+          <ItemContent className="gap-0">
+            <ItemTitle>{postData.author.name}</ItemTitle>
+            <ItemDescription className="text-xs">
+              {postData.author.username}
+            </ItemDescription>
+          </ItemContent>
+          <ItemActions className="-me-1">
+            <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>
+          </ItemActions>
+        </Item>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="relative aspect-video border-y">
+          <Image
+            src={postData.content.image.src}
+            alt={postData.content.image.alt}
+            fill
+            className="object-cover"
+            sizes="(max-width: 768px) 100vw, 400px"
+          />
+        </div>
+        <div className="space-y-2 px-6 py-5">
+          <h5 className="font-semibold">{postData.content.title}</h5>
+          <p className="text-muted-foreground text-sm">
+            {postData.content.description}
+          </p>
+          <div className="flex gap-2 *:text-sm *:text-blue-500 *:hover:underline">
+            {postData.content.hashtags.map((hashtag) => (
+              <Link key={hashtag} href="#">
+                {hashtag}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex border-t p-0!">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-muted-foreground shrink-0 grow rounded-none"
+        >
+          <HeartIcon />
+          <span className="hidden sm:inline">Like</span>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-muted-foreground shrink-0 grow rounded-none"
+        >
+          <MessageCircleIcon />
+          <span className="hidden sm:inline">Comment</span>
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="text-muted-foreground shrink-0 grow rounded-none"
+        >
+          <ShareIcon />
+          <span className="hidden sm:inline">Share</span>
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,172 @@
+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 {
+  BadgeCheckIcon,
+  BookmarkIcon,
+  CopyIcon,
+  EditIcon,
+  EyeIcon,
+  FlagIcon,
+  HeartIcon,
+  MaximizeIcon,
+  MessageCircleIcon,
+  MoreVerticalIcon,
+  ShareIcon,
+  TrashIcon,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+const postData = {
+  author: {
+    avatar: "https://i.pravatar.cc/150?img=32",
+    name: "Sarah Mitchell",
+    verified: true,
+    timestamp: "Posted 2h ago",
+  },
+  content: {
+    text: "Just launched my first SaaS product after 6 months of hard work! 🚀 The journey was challenging but incredibly rewarding. Excited to see where this goes! 💪✨",
+    hashtags: ["#SaaS", "#startup", "#buildinpublic"],
+    image: {
+      alt: "Entrepreneur celebrating launch with laptop",
+      src: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80",
+    },
+  },
+  engagement: {
+    views: "12,458",
+    likes: "347",
+    comments: "28",
+  },
+};
+
+export default function CardComponent() {
+  return (
+    <div className="relative w-full max-w-sm">
+      <Card className="relative w-full overflow-hidden shadow-none">
+        <CardHeader className="flex flex-row items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <Avatar>
+              <AvatarImage
+                src={postData.author.avatar}
+                alt={`${postData.author.name} avatar`}
+              />
+            </Avatar>
+            <div>
+              <div className="flex items-center gap-1.5">
+                <h5 className="font-semibold">{postData.author.name}</h5>
+                {postData.author.verified && (
+                  <BadgeCheckIcon className="text-background size-5 fill-green-500" />
+                )}
+              </div>
+              <p className="text-muted-foreground text-xs">
+                {postData.author.timestamp}
+              </p>
+            </div>
+          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <MoreVerticalIcon />
+                <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>
+                <ShareIcon />
+                <span>Share post</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">
+          <div className="space-y-2">
+            <p className="text-sm leading-relaxed">{postData.content.text}</p>
+            <div className="flex gap-2">
+              {postData.content.hashtags.map((hashtag) => (
+                <Link
+                  key={hashtag}
+                  href="#"
+                  className="text-sm text-blue-500 hover:underline"
+                >
+                  {hashtag}
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          <div className="relative aspect-video overflow-hidden rounded-lg">
+            <Image
+              src={postData.content.image.src}
+              alt={postData.content.image.alt}
+              fill
+              className="object-cover"
+            />
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="absolute top-2 right-2 bg-black/20 backdrop-blur-sm hover:bg-black/30"
+            >
+              <MaximizeIcon className="text-white" />
+              <span className="sr-only">View fullscreen</span>
+            </Button>
+          </div>
+        </CardContent>
+
+        <CardFooter className="flex items-center justify-between">
+          <div className="flex items-center gap-5">
+            <div className="flex items-center gap-1.5">
+              <EyeIcon className="text-muted-foreground size-5" />
+              <span className="text-sm">{postData.engagement.views}</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <HeartIcon className="fill-destructive text-destructive size-4" />
+              <span className="text-sm">{postData.engagement.likes}</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <MessageCircleIcon className="size-4 text-green-500" />
+              <span className="text-sm">{postData.engagement.comments}</span>
+            </div>
+          </div>
+          <Button variant="ghost" size="sm" className="gap-2">
+            <BookmarkIcon />
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

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

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

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

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