jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/dashboard-ui/modal-dialogs-3/render.jsx

@@ -0,0 +1,176 @@
+"use client";
+
+import * as React from "react";
+import { Check, Plus } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+const users = [
+  {
+    name: "Olivia Martin",
+    email: "m@example.com",
+    avatar: `/images/avatars/01.png`,
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "isabella.nguyen@email.com",
+    avatar: `/images/avatars/07.png`,
+  },
+  {
+    name: "Emma Wilson",
+    email: "emma@example.com",
+    avatar: `/images/avatars/02.png`,
+  },
+  {
+    name: "Jackson Lee",
+    email: "lee@example.com",
+    avatar: `/images/avatars/09.png`,
+  },
+  {
+    name: "William Kim",
+    email: "will@email.com",
+    avatar: `/images/avatars/06.png`,
+  },
+] as const;
+
+type User = (typeof users)[number];
+
+export default function ChatWidget() {
+  const [open, setOpen] = React.useState(true);
+  const [selectedUsers, setSelectedUsers] = React.useState<User[]>([]);
+
+  const [messages, setMessages] = React.useState([
+    {
+      role: "agent",
+      content: "Hi, how can I help you today?",
+    },
+    {
+      role: "user",
+      content: "Hey, I'm having trouble with my account.",
+    },
+    {
+      role: "agent",
+      content: "What seems to be the problem?",
+    },
+    {
+      role: "user",
+      content: "I can't log in.",
+    },
+  ]);
+  const [input, setInput] = React.useState("");
+  const inputLength = input.trim().length;
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center px-4">
+      <div className="mx-auto flex w-full max-w-sm flex-col items-center gap-8">
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button variant="outline" onClick={() => setOpen(true)}>
+              <Plus />
+              New message
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="gap-0 p-0 outline-hidden">
+            <DialogHeader className="px-4 pt-5 pb-4">
+              <DialogTitle>New message</DialogTitle>
+              <DialogDescription>
+                Invite a user to this thread. This will create a new group
+                message.
+              </DialogDescription>
+            </DialogHeader>
+            <Command className="overflow-hidden rounded-t-none border-t">
+              <CommandInput placeholder="Search user..." />
+              <CommandList>
+                <CommandEmpty>No users found.</CommandEmpty>
+                <CommandGroup className="p-2">
+                  {users.map((user) => (
+                    <CommandItem
+                      key={user.email}
+                      className="flex items-center p-2"
+                      onSelect={() => {
+                        if (selectedUsers.includes(user)) {
+                          return setSelectedUsers(
+                            selectedUsers.filter(
+                              (selectedUser) => selectedUser !== user,
+                            ),
+                          );
+                        }
+
+                        return setSelectedUsers(
+                          [...users].filter((u) =>
+                            [...selectedUsers, user].includes(u),
+                          ),
+                        );
+                      }}
+                    >
+                      <Avatar>
+                        <AvatarImage src={user.avatar} alt="Image" />
+                        <AvatarFallback>{user.name[0]}</AvatarFallback>
+                      </Avatar>
+                      <div className="ml-2">
+                        <p className="text-sm leading-none font-medium">
+                          {user.name}
+                        </p>
+                        <p className="text-muted-foreground text-sm">
+                          {user.email}
+                        </p>
+                      </div>
+                      {selectedUsers.includes(user) ? (
+                        <Check className="text-primary ml-auto flex h-5 w-5" />
+                      ) : null}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+            <DialogFooter className="flex items-center border-t p-4 sm:justify-between">
+              {selectedUsers.length > 0 ? (
+                <div className="flex -space-x-2 overflow-hidden">
+                  {selectedUsers.map((user) => (
+                    <Avatar
+                      key={user.email}
+                      className="border-background inline-block border-2"
+                    >
+                      <AvatarImage src={user.avatar} />
+                      <AvatarFallback>{user.name[0]}</AvatarFallback>
+                    </Avatar>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-muted-foreground text-sm">
+                  Select users to add to this thread.
+                </p>
+              )}
+              <Button
+                disabled={selectedUsers.length < 2}
+                onClick={() => {
+                  setOpen(false);
+                }}
+              >
+                Continue
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-1/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-1/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-1/render.jsx

@@ -0,0 +1,20 @@
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+
+import { AppSidebar } from "./app-sidebar";
+import { AppHeader } from "./app-header";
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <AppHeader />
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="bg-muted/50 grid min-h-[100vh] flex-1 place-items-center rounded-xl md:min-h-min">
+            <span className="text-muted-foreground text-sm">Content goes here</span>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-2/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-2/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-2/render.jsx

@@ -0,0 +1,22 @@
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+
+import { AppSidebar } from "./app-sidebar";
+import { AppHeader } from "./app-header";
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset className="bg-muted/50">
+        <AppHeader />
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="bg-background grid min-h-[100vh] flex-1 place-items-center rounded-xl md:min-h-min">
+            <span className="text-muted-foreground text-sm">
+              Content goes here
+            </span>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-3/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-3/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/page-layouts-3/render.jsx

@@ -0,0 +1,22 @@
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+
+import { AppSidebar } from "./app-sidebar";
+import { AppHeader } from "./app-header";
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset className="bg-muted/50">
+        <AppHeader />
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="bg-background grid min-h-[100vh] flex-1 place-items-center rounded-xl md:min-h-min">
+            <span className="text-muted-foreground text-sm">
+              Content goes here
+            </span>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/sidebar-layouts-1/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/sidebar-layouts-1/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/sidebar-layouts-1/render.jsx

@@ -0,0 +1,20 @@
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+
+import { AppSidebar } from "./components/app-sidebar";
+import { AppHeader } from "./components/app-header";
+
+export default function Page() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <AppHeader />
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="bg-muted/50 grid min-h-[100vh] flex-1 place-items-center rounded-xl md:min-h-min">
+            <span className="text-muted-foreground text-sm">Content goes here</span>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-1/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-1/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-1/render.jsx

@@ -0,0 +1,98 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { GithubIcon, TwitterIcon } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+
+export default function LoginPage() {
+  return (
+    <section className="flex min-h-screen w-full items-center justify-center py-4 lg:py-20">
+      <div className="w-full max-w-sm space-y-6">
+        <h2 className="mt-6 font-bold text-3xl">Sign in to your account</h2>
+        <form action="#" className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email address</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              className="mt-1"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              className="mt-1"
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <Checkbox id="rememberMe" />
+              <label
+                htmlFor="rememberMe"
+                className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                Remember me
+              </label>
+            </div>
+
+            <Link href="#" className="text-sm hover:underline">
+              Forgot your password?
+            </Link>
+          </div>
+
+          <div>
+            <Button type="submit" className="w-full">
+              Signin
+            </Button>
+          </div>
+        </form>
+
+        <div className="space-y-6 lg:mt-10">
+          <div className="w-full max-w-sm">
+            <div className="relative flex items-center gap-2">
+              <Separator className="flex-1" />
+              <span className="text-muted-foreground shrink-0 text-sm">
+                or continue with
+              </span>
+              <Separator className="flex-1" />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-3 gap-3">
+            <Button variant="outline">
+              <GithubIcon />
+              <span className="sr-only">GitHub</span>
+            </Button>
+            <Button variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                width="24"
+                height="24"
+              >
+                <path d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z"></path>
+              </svg>
+              <span className="sr-only">Google</span>
+            </Button>
+            <Button variant="outline">
+              <TwitterIcon />
+              <span className="sr-only">Twitter</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-2/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-2/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-2/render.jsx

@@ -0,0 +1,116 @@
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { GithubIcon, GitlabIcon } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+
+export default function LoginPage() {
+  return (
+    <div className="sm:h-screen lg:grid lg:grid-cols-2">
+      <div className="mx-auto h-full w-full max-w-sm space-y-6 py-4 lg:py-20">
+        <div className="flex h-full flex-col justify-center space-y-6">
+          <h2 className="text-3xl font-bold">Sign in to your account</h2>
+          <form action="#" className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email address</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="mt-1"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                className="mt-1"
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Checkbox id="rememberMe" />
+                <label
+                  htmlFor="rememberMe"
+                  className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Remember me
+                </label>
+              </div>
+
+              <Link href="#" className="text-sm hover:underline">
+                Forgot your password?
+              </Link>
+            </div>
+
+            <div>
+              <Button type="submit" className="w-full">
+                Sign in
+              </Button>
+            </div>
+          </form>
+
+          <div className="space-y-6">
+            <div className="relative flex items-center gap-2">
+              <Separator className="flex-1" />
+              <span className="text-muted-foreground shrink-0 text-sm">
+                or continue with
+              </span>
+              <Separator className="flex-1" />
+            </div>
+
+            <div className="grid gap-3">
+              <Button variant="outline" className="relative w-full">
+                <span className="absolute start-4">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    width="24"
+                    height="24"
+                  >
+                    <path d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z"></path>
+                  </svg>
+                </span>
+                Continue with Google
+              </Button>
+              <Button variant="outline" className="relative w-full">
+                <span className="absolute start-4">
+                  <GithubIcon />
+                </span>
+                Continue with GitHub
+              </Button>
+              <Button variant="outline" className="relative w-full">
+                <span className="absolute start-4">
+                  <GitlabIcon />
+                </span>
+                Continue with Gitlab
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="relative hidden lg:block">
+        <Image
+          className="absolute inset-0 h-full w-full object-cover"
+          src="https://images.unsplash.com/photo-1483354483454-4cd359948304?q=80&w=1200"
+          alt="Login cover image"
+          width={1920}
+          height={1080}
+          unoptimized
+        />
+      </div>
+    </div>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-3/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-3/data.js

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

data/app/javascript/seeds/blocks/dashboard-ui/sign-in-forms-3/render.jsx

@@ -0,0 +1,104 @@
+import Link from "next/link";
+import { GithubIcon, TwitterIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+
+export default function LoginPage() {
+  return (
+    <section
+      className="flex min-h-screen w-full items-center justify-center bg-cover py-4 lg:py-20"
+      style={{
+        backgroundImage:
+          "url(https://images.unsplash.com/photo-1483354483454-4cd359948304?q=80&w=1200)",
+      }}
+    >
+      <Card className="w-full max-w-sm border-none shadow-xl">
+        <CardHeader>
+          <CardTitle className="text-3xl font-bold">Login</CardTitle>
+          <CardDescription>
+            Enter your email below to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <form action="#" className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email address</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="mt-1"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                className="mt-1"
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Checkbox id="rememberMe" />
+                <label
+                  htmlFor="rememberMe"
+                  className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                >
+                  Remember me
+                </label>
+              </div>
+
+              <Link href="#" className="text-sm hover:underline">
+                Forgot your password?
+              </Link>
+            </div>
+
+            <div>
+              <Button type="submit" className="w-full">
+                Sign in
+              </Button>
+            </div>
+          </form>
+
+          <div className="grid grid-cols-3 gap-3">
+            <Button variant="outline">
+              <GithubIcon />
+            </Button>
+            <Button variant="outline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                width="24"
+                height="24"
+              >
+                <path d="M12 2a9.96 9.96 0 0 1 6.29 2.226a1 1 0 0 1 .04 1.52l-1.51 1.362a1 1 0 0 1 -1.265 .06a6 6 0 1 0 2.103 6.836l.001 -.004h-3.66a1 1 0 0 1 -.992 -.883l-.007 -.117v-2a1 1 0 0 1 1 -1h6.945a1 1 0 0 1 .994 .89c.04 .367 .061 .737 .061 1.11c0 5.523 -4.477 10 -10 10s-10 -4.477 -10 -10s4.477 -10 10 -10z"></path>
+              </svg>
+            </Button>
+            <Button variant="outline">
+              <TwitterIcon />
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </section>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-1/config.json

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

data/app/javascript/seeds/blocks/dashboard-ui/stat-cards-1/data.js

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