popover-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover-example",
  "title": "Popover",
  "registryDependencies": [
    "button",
    "dialog",
    "field",
    "input",
    "popover",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-mira/examples/popover-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\n\nexport default function PopoverExample() {\n  return (\n    <ExampleWrapper>\n      <PopoverBasic />\n      <PopoverSides />\n      <PopoverWithForm />\n      <PopoverAlignments />\n      <PopoverInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction PopoverBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Popover>\n        <PopoverTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Open Popover\n        </PopoverTrigger>\n        <PopoverContent align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex flex-wrap gap-2\">\n          {([\"inline-start\", \"left\", \"top\"] as const).map((side) => (\n            <Popover key={side}>\n              <PopoverTrigger\n                render={\n                  <Button variant=\"outline\" className=\"w-fit capitalize\" />\n                }\n              >\n                {side.replace(\"-\", \" \")}\n              </PopoverTrigger>\n              <PopoverContent side={side} className=\"w-40\">\n                <p>Popover on {side.replace(\"-\", \" \")}</p>\n              </PopoverContent>\n            </Popover>\n          ))}\n        </div>\n        <div className=\"flex flex-wrap gap-2\">\n          {([\"bottom\", \"right\", \"inline-end\"] as const).map((side) => (\n            <Popover key={side}>\n              <PopoverTrigger\n                render={\n                  <Button variant=\"outline\" className=\"w-fit capitalize\" />\n                }\n              >\n                {side.replace(\"-\", \" \")}\n              </PopoverTrigger>\n              <PopoverContent side={side} className=\"w-40\">\n                <p>Popover on {side.replace(\"-\", \" \")}</p>\n              </PopoverContent>\n            </Popover>\n          ))}\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction PopoverWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Popover>\n        <PopoverTrigger render={<Button variant=\"outline\" />}>\n          Open Popover\n        </PopoverTrigger>\n        <PopoverContent className=\"w-64\" align=\"start\">\n          <PopoverHeader>\n            <PopoverTitle>Dimensions</PopoverTitle>\n            <PopoverDescription>\n              Set the dimensions for the layer.\n            </PopoverDescription>\n          </PopoverHeader>\n          <FieldGroup className=\"gap-4\">\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"width\" className=\"w-1/2\">\n                Width\n              </FieldLabel>\n              <Input id=\"width\" defaultValue=\"100%\" />\n            </Field>\n            <Field orientation=\"horizontal\">\n              <FieldLabel htmlFor=\"height\" className=\"w-1/2\">\n                Height\n              </FieldLabel>\n              <Input id=\"height\" defaultValue=\"25px\" />\n            </Field>\n          </FieldGroup>\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction PopoverAlignments() {\n  return (\n    <Example title=\"Alignments\">\n      <div className=\"flex gap-6\">\n        <Popover>\n          <PopoverTrigger render={<Button variant=\"outline\" size=\"sm\" />}>\n            Start\n          </PopoverTrigger>\n          <PopoverContent align=\"start\" className=\"w-40\">\n            Aligned to start\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger render={<Button variant=\"outline\" size=\"sm\" />}>\n            Center\n          </PopoverTrigger>\n          <PopoverContent align=\"center\" className=\"w-40\">\n            Aligned to center\n          </PopoverContent>\n        </Popover>\n        <Popover>\n          <PopoverTrigger render={<Button variant=\"outline\" size=\"sm\" />}>\n            End\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"w-40\">\n            Aligned to end\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction PopoverInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Popover Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the popover.\n            </DialogDescription>\n          </DialogHeader>\n          <Popover>\n            <PopoverTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Popover\n            </PopoverTrigger>\n            <PopoverContent align=\"start\">\n              <PopoverHeader>\n                <PopoverTitle>Popover in Dialog</PopoverTitle>\n                <PopoverDescription>\n                  This popover appears inside a dialog. Click the button to open\n                  it.\n                </PopoverDescription>\n              </PopoverHeader>\n            </PopoverContent>\n          </Popover>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}