shadcn/app/public/registry/styles/default/dashboard-03.json

{
  "name": "dashboard-03",
  "registryDependencies": [
    "badge",
    "button",
    "drawer",
    "input",
    "label",
    "select",
    "textarea",
    "tooltip"
  ],
  "files": [
    {
      "name": "dashboard-03.tsx",
      "content": "import {\n  Bird,\n  Book,\n  Bot,\n  Code2,\n  CornerDownLeft,\n  LifeBuoy,\n  Mic,\n  Paperclip,\n  Rabbit,\n  Settings,\n  Settings2,\n  Share,\n  SquareTerminal,\n  SquareUser,\n  Triangle,\n  Turtle,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerDescription,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\nimport { Textarea } from \"@/registry/default/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\"\n\nexport const description =\n  \"An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.\"\n\nexport const iframeHeight = \"740px\"\n\nexport const containerClassName = \"w-full h-full\"\n\nexport default function Dashboard() {\n  return (\n    <div className=\"grid h-screen w-full pl-[56px]\">\n      <aside className=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n        <div className=\"border-b p-2\">\n          <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n            <Triangle className=\"size-5 fill-foreground\" />\n          </Button>\n        </div>\n        <nav className=\"grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Playground\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Models\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              API\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n        <nav className=\"mt-auto grid gap-1 p-2\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Help\n            </TooltipContent>\n          </Tooltip>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser className=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" sideOffset={5}>\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </nav>\n      </aside>\n      <div className=\"flex flex-col\">\n        <header className=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n          <h1 className=\"text-xl font-semibold\">Playground</h1>\n          <Drawer>\n            <DrawerTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\">\n                <Settings className=\"size-4\" />\n                <span className=\"sr-only\">Settings</span>\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"max-h-[80vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Configuration</DrawerTitle>\n                <DrawerDescription>\n                  Configure the settings for the model and messages.\n                </DrawerDescription>\n              </DrawerHeader>\n              <form className=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Settings\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"model\">Model</Label>\n                    <Select>\n                      <SelectTrigger\n                        id=\"model\"\n                        className=\"items-start [&_[data-description]]:hidden\"\n                      >\n                        <SelectValue placeholder=\"Select a model\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"genesis\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Rabbit className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Genesis\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Our fastest model for general use cases.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"explorer\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Bird className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Explorer\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                Performance and speed for efficiency.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                        <SelectItem value=\"quantum\">\n                          <div className=\"flex items-start gap-3 text-muted-foreground\">\n                            <Turtle className=\"size-5\" />\n                            <div className=\"grid gap-0.5\">\n                              <p>\n                                Neural{\" \"}\n                                <span className=\"font-medium text-foreground\">\n                                  Quantum\n                                </span>\n                              </p>\n                              <p className=\"text-xs\" data-description>\n                                The most powerful model for complex\n                                computations.\n                              </p>\n                            </div>\n                          </div>\n                        </SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"temperature\">Temperature</Label>\n                    <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </fieldset>\n                <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                  <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                    Messages\n                  </legend>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"role\">Role</Label>\n                    <Select defaultValue=\"system\">\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select a role\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"system\">System</SelectItem>\n                        <SelectItem value=\"user\">User</SelectItem>\n                        <SelectItem value=\"assistant\">Assistant</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"content\">Content</Label>\n                    <Textarea id=\"content\" placeholder=\"You are a...\" />\n                  </div>\n                </fieldset>\n              </form>\n            </DrawerContent>\n          </Drawer>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ml-auto gap-1.5 text-sm\"\n          >\n            <Share className=\"size-3.5\" />\n            Share\n          </Button>\n        </header>\n        <main className=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n          <div\n            className=\"relative hidden flex-col items-start gap-8 md:flex\"\n            x-chunk=\"dashboard-03-chunk-0\"\n          >\n            <form className=\"grid w-full items-start gap-6\">\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      className=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div className=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle className=\"size-5\" />\n                          <div className=\"grid gap-0.5\">\n                            <p>\n                              Neural{\" \"}\n                              <span className=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p className=\"text-xs\" data-description>\n                              The most powerful model for complex computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-p\">Top P</Label>\n                    <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                  </div>\n                  <div className=\"grid gap-3\">\n                    <Label htmlFor=\"top-k\">Top K</Label>\n                    <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                  </div>\n                </div>\n              </fieldset>\n              <fieldset className=\"grid gap-6 rounded-lg border p-4\">\n                <legend className=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"role\">Role</Label>\n                  <Select defaultValue=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">System</SelectItem>\n                      <SelectItem value=\"user\">User</SelectItem>\n                      <SelectItem value=\"assistant\">Assistant</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div className=\"grid gap-3\">\n                  <Label htmlFor=\"content\">Content</Label>\n                  <Textarea\n                    id=\"content\"\n                    placeholder=\"You are a...\"\n                    className=\"min-h-[9.5rem]\"\n                  />\n                </div>\n              </fieldset>\n            </form>\n          </div>\n          <div className=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n            <Badge variant=\"outline\" className=\"absolute right-3 top-3\">\n              Output\n            </Badge>\n            <div className=\"flex-1\" />\n            <form\n              className=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\"\n              x-chunk=\"dashboard-03-chunk-1\"\n            >\n              <Label htmlFor=\"message\" className=\"sr-only\">\n                Message\n              </Label>\n              <Textarea\n                id=\"message\"\n                placeholder=\"Type your message here...\"\n                className=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n              />\n              <div className=\"flex items-center p-3 pt-0\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip className=\"size-4\" />\n                      <span className=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Attach File</TooltipContent>\n                </Tooltip>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic className=\"size-4\" />\n                      <span className=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">Use Microphone</TooltipContent>\n                </Tooltip>\n                <Button type=\"submit\" size=\"sm\" className=\"ml-auto gap-1.5\">\n                  Send Message\n                  <CornerDownLeft className=\"size-3.5\" />\n                </Button>\n              </div>\n            </form>\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "type": "components:block",
  "category": "Application",
  "subcategory": "Dashboard"
}