jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/ecommerce/store-navigation-1/render.jsx

@@ -0,0 +1,290 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { HeartIcon, MenuIcon, SearchIcon, ShoppingBag } from "lucide-react";
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle
+} from "@/components/ui/navigation-menu";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import { BagIcon, JewelryIcon, SunglassesIcon, HatIcon, BeltIcon, OtherIcon } from "./icons";
+
+type ListItemType = {
+  title: string;
+  href?: string;
+  description?: string;
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+};
+
+const accessoriesMenuItems: ListItemType[] = [
+  {
+    title: "Bags",
+    href: "#",
+    icon: BagIcon
+  },
+  {
+    title: "Jewelry",
+    href: "#",
+    icon: JewelryIcon
+  },
+  {
+    title: "Sunglasses",
+    href: "#",
+    icon: SunglassesIcon
+  },
+  {
+    title: "Hats & Beanies",
+    href: "#",
+    icon: HatIcon
+  },
+  {
+    title: "Belts",
+    href: "#",
+    icon: BeltIcon
+  },
+  {
+    title: "All  Accessories",
+    href: "#",
+    icon: OtherIcon
+  }
+];
+
+const collectionItems = [
+  {
+    title: "Trends",
+    href: "#",
+    description: "Discover this summer's trendy products."
+  },
+  {
+    title: "Best Sellers",
+    href: "#",
+    description: "We've collected the best-selling products for you."
+  },
+  {
+    title: "New Arrivals",
+    href: "#",
+    description: "Discover the most favorited products."
+  }
+];
+
+export default function NavigationMenuDemo() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <header>
+        <div className="flex grid-cols-3 items-center justify-between p-4">
+          {/* left content and log */}
+          <Link href="/" className="flex items-center gap-2">
+            <img
+              className="size-6 rounded-md"
+              src="https://shadcnuikit.com/logo.png"
+              alt="svg logo"
+            />
+            <span className="text-base font-medium">Shadcn UI Kit</span>
+          </Link>
+
+          {/* main navigation */}
+          <NavigationMenu className="hidden lg:block">
+            <NavigationMenuList>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>Collections</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid gap-0 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                    <li className="row-span-3">
+                      <NavigationMenuLink asChild>
+                        <Link
+                          href="#"
+                          className="block space-y-2"
+                          onClick={(e) => e.preventDefault()}>
+                          <img
+                            src="https://images.unsplash.com/photo-1620799139834-6b8f844fbe61?q=80&w=300&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                            alt="..."
+                            className="aspect-4/3 w-96 rounded object-cover"
+                          />
+                          <div className="space-y-1">
+                            <div className="text-sm leading-none font-medium">
+                              Timeless Classics
+                            </div>
+                            <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                              Elevate your style with essentials
+                            </p>
+                          </div>
+                        </Link>
+                      </NavigationMenuLink>
+                    </li>
+                    {collectionItems.map((item, i) => (
+                      <Link
+                        key={i}
+                        href={`${item.href}`}
+                        className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground gap-2 space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none"
+                        onClick={(e) => e.preventDefault()}>
+                        <div className="text-sm leading-none font-medium">{item.title}</div>
+                        <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                          {item.description}
+                        </p>
+                      </Link>
+                    ))}
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuTrigger>Accessories</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid w-[400px] list-none grid-cols-2 gap-3 lg:w-[300px]">
+                    {accessoriesMenuItems.map((item, i) => (
+                      <NavigationMenuLink key={i} asChild>
+                        <Link
+                          href={`${item.href}`}
+                          className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors outline-none select-none"
+                          onClick={(e) => e.preventDefault()}>
+                          {item.icon ? (
+                            <item.icon className="text-muted-foreground mx-auto size-8" />
+                          ) : null}
+                          <span className="block text-sm leading-none font-medium">
+                            {item.title}
+                          </span>
+                        </Link>
+                      </NavigationMenuLink>
+                    ))}
+                  </ul>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild>
+                  <Link
+                    href="#"
+                    className={navigationMenuTriggerStyle()}
+                    onClick={(e) => e.preventDefault()}>
+                    Women
+                  </Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink asChild>
+                  <Link
+                    href="#"
+                    className={navigationMenuTriggerStyle()}
+                    onClick={(e) => e.preventDefault()}>
+                    Men
+                  </Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
+
+          {/* right content */}
+          <div className="flex items-center gap-1">
+            <Button variant="ghost">
+              <SearchIcon />
+            </Button>
+            <Button variant="ghost">
+              <HeartIcon />
+            </Button>
+            <Button variant="ghost" size="icon" className="relative" aria-label="Cart">
+              <ShoppingBag aria-hidden="true" />
+              <Badge className="absolute -top-1 left-full size-4 -translate-x-1/2 rounded-full p-0 text-[10px]">
+                4
+              </Badge>
+            </Button>
+            <div className="ms-3 flex items-center gap-1">
+              <Button variant="secondary">Sign in</Button>
+              <Button variant="ghost" onClick={() => setOpen(true)} className="lg:hidden">
+                <MenuIcon />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* for mobile navigation */}
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent className="space-y-4 overflow-auto p-4">
+          <div className="space-y-2">
+            <div className="font-medium">Collections</div>
+            <ul className="space-y-4">
+              <li>
+                <Link
+                  href="#"
+                  className="block space-y-2 rounded-md border p-3"
+                  onClick={(e) => e.preventDefault()}>
+                  <img
+                    src="https://images.unsplash.com/photo-1620799139834-6b8f844fbe61?q=80&w=300&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                    alt="..."
+                    className="aspect-4/3 w-96 rounded object-cover"
+                  />
+                  <div className="space-y-1">
+                    <div className="text-sm leading-none font-medium">Timeless Classics</div>
+                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                      Elevate your style with essentials
+                    </p>
+                  </div>
+                </Link>
+              </li>
+              {collectionItems.map((item, i) => (
+                <li key={i}>
+                  <Link
+                    href={`${item.href}`}
+                    className="block gap-2 space-y-1 leading-none no-underline outline-none"
+                    onClick={(e) => e.preventDefault()}>
+                    <div className="text-sm leading-none font-medium">{item.title}</div>
+                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+                      {item.description}
+                    </p>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <Separator />
+
+          <div className="space-y-2">
+            <div className="font-medium">Accessories</div>
+            <ul className="grid list-none grid-cols-2 gap-2">
+              {accessoriesMenuItems.map((item, i) => (
+                <Link
+                  key={i}
+                  href={`${item.href}`}
+                  className="bg-muted/50 flex flex-col justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors"
+                  onClick={(e) => e.preventDefault()}>
+                  {item.icon ? (
+                    <item.icon className="text-muted-foreground mx-auto size-8" />
+                  ) : null}
+                  <span className="block text-sm leading-none font-medium">{item.title}</span>
+                </Link>
+              ))}
+            </ul>
+          </div>
+
+          <div className="space-y-2">
+            <Link
+              href="#"
+              className="bg-muted/50 flex flex-col justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors">
+              Men
+            </Link>
+
+            <Link
+              href="#"
+              className="bg-muted/50 flex flex-col justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors">
+              Women
+            </Link>
+          </div>
+        </SheetContent>
+      </Sheet>
+
+      {/* fake content */}
+      <main className="bg-muted/50 min-h-[500px]"></main>
+    </>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce-charts-1/config.json

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

data/app/javascript/seeds/blocks/ecommerce-charts-1/data.js

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

data/app/javascript/seeds/blocks/ecommerce-charts-1/render.jsx

@@ -0,0 +1,86 @@
+"use client";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@/components/ui/chart";
+import { Bar, BarChart, XAxis } from "recharts";
+
+export default function EcommerceChart() {
+  const chartConfig = {
+    desktop: {
+      label: "Desktop",
+      color: "var(--chart-1)"
+    },
+    mobile: {
+      label: "Mobile",
+      color: "var(--chart-2)"
+    }
+  } satisfies ChartConfig;
+
+  const chartData = [
+    { month: "January", desktop: 190, mobile: 180 },
+    { month: "February", desktop: 250, mobile: 200 },
+    { month: "March", desktop: 240, mobile: 120 },
+    { month: "April", desktop: 120, mobile: 190 },
+    { month: "May", desktop: 110, mobile: 130 },
+    { month: "June", desktop: 250, mobile: 140 }
+  ];
+
+  return (
+    <Card className="w-full md:w-[500px]">
+      <CardHeader>
+        <CardTitle>Total Revenue</CardTitle>
+        <CardDescription>Income in the last 28 days</CardDescription>
+        <CardAction className="relative col-start-auto row-start-auto justify-self-start lg:col-start-2 lg:row-start-1 lg:justify-self-end">
+          <div className="end-0 top-0 mt-2 flex flex-col items-stretch space-y-0 p-0 sm:flex-row lg:absolute lg:mt-0">
+            <div className="flex gap-8 rounded-lg border p-4">
+              <button className="flex flex-1 flex-col justify-center gap-2 text-left">
+                <span className="text-muted-foreground text-xs">Desktop</span>
+                <span className="text-lg leading-none font-medium sm:text-2xl">24,828</span>
+              </button>
+              <button className="flex flex-1 flex-col justify-center gap-2 text-left">
+                <span className="text-muted-foreground text-xs">Mobile</span>
+                <span className="text-lg leading-none font-medium sm:text-2xl">25,010</span>
+              </button>
+            </div>
+          </div>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="lg:mt-10">
+          <ChartContainer className="!aspect-21/9 w-full" config={chartConfig}>
+            <BarChart
+              accessibilityLayer
+              data={chartData}
+              margin={{
+                left: -6,
+                right: -6
+              }}>
+              <XAxis
+                dataKey="month"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                tickFormatter={(value) => value.slice(0, 3)}
+              />
+              <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} />
+              <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+              <Bar dataKey="mobile" fill="var(--color-mobile)" radius={8} />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce-charts-2/config.json

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

data/app/javascript/seeds/blocks/ecommerce-charts-2/data.js

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

data/app/javascript/seeds/blocks/ecommerce-charts-2/render.jsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as React from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@/components/ui/chart";
+
+import { chartData } from "./data";
+
+const chartConfig = {
+  views: {
+    label: "Page Views"
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-2)"
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-1)"
+  }
+} satisfies ChartConfig;
+
+export default function EcommerceChart() {
+  const [activeChart, setActiveChart] = React.useState<keyof typeof chartConfig>("desktop");
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0)
+    }),
+    []
+  );
+
+  return (
+    <Card className="relative w-full md:w-[500px]">
+      <CardHeader>
+        <CardTitle>Revenue Chart</CardTitle>
+        <CardDescription>Last 28 days</CardDescription>
+        <CardAction className="col-start-auto row-start-auto justify-self-start md:col-start-2 md:row-start-1 md:justify-self-end">
+          <div className="end-0 top-0 flex divide-x rounded-md border-s border-e border-t border-b md:absolute md:rounded-none md:rounded-bl-md md:border-e-transparent md:border-t-transparent">
+            {["desktop", "mobile"].map((key) => {
+              const chart = key as keyof typeof chartConfig;
+              return (
+                <button
+                  key={chart}
+                  data-active={activeChart === chart}
+                  className="data-[active=true]:bg-muted relative flex flex-1 flex-col justify-center gap-1 px-6 py-4 text-left"
+                  onClick={() => setActiveChart(chart)}>
+                  <span className="text-muted-foreground text-xs">{chartConfig[chart].label}</span>
+                  <span className="text-lg leading-none font-semibold sm:text-2xl">
+                    {total[key as keyof typeof total].toLocaleString()}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-[186px] w-full">
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 0,
+              right: 0,
+              bottom: 0
+            }}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric"
+                });
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric"
+                    });
+                  }}
+                />
+              }
+            />
+            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} radius={5} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce-charts-3/config.json

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

data/app/javascript/seeds/blocks/ecommerce-charts-3/data.js

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

data/app/javascript/seeds/blocks/ecommerce-charts-3/render.jsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent
+} from "@/components/ui/chart";
+import { Label, Pie, PieChart } from "recharts";
+
+export default function EcommerceChart() {
+  const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+    { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+    { browser: "other", visitors: 190, fill: "var(--color-other)" }
+  ];
+
+  const chartConfig = {
+    visitors: {
+      label: "Visitors"
+    },
+    chrome: {
+      label: "Direct",
+      color: "var(--chart-1)"
+    },
+    safari: {
+      label: "Social",
+      color: "var(--chart-2)"
+    },
+    firefox: {
+      label: "Email",
+      color: "var(--chart-3)"
+    },
+    edge: {
+      label: "Referrals",
+      color: "var(--chart-4)"
+    },
+    other: {
+      label: "Other",
+      color: "var(--chart-5)"
+    }
+  } satisfies ChartConfig;
+
+  return (
+    <Card className="w-full md:w-[400px]">
+      <CardHeader>
+        <CardTitle>Store Visits by Source</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[350px]">
+          <PieChart>
+            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}>
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle">
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold">
+                          {/* {totalVisitors.toLocaleString()} */} 10.2K
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground">
+                          Visitors
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+            <ChartLegend content={<ChartLegendContent className="flex-wrap" />} />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/ecommerce-charts-4/config.json

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

data/app/javascript/seeds/blocks/ecommerce-charts-4/data.js

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