Popover

'use client';

import { Button } from '@/registry/san-francisco/ui/button';
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@/registry/san-francisco/ui/popover';

export default function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline">Open Popover</Button>} />
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Title</PopoverTitle>
        </PopoverHeader>
        <PopoverDescription>This is a popover with some content.</PopoverDescription>
      </PopoverContent>
    </Popover>
  );
}

'use client';

import { Button } from '@/registry/san-francisco/ui/button';
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from '@/registry/san-francisco/ui/popover';

export default function PopoverDemoPlacement() {
  return (
    <>
      <Popover>
        <PopoverTrigger render={<Button variant="outline">Top</Button>} />
        <PopoverContent side="top">
          <PopoverDescription>This popover appears on top.</PopoverDescription>
        </PopoverContent>
      </Popover>
      <Popover>
        <PopoverTrigger render={<Button variant="outline">Bottom</Button>} />
        <PopoverContent side="bottom">
          <PopoverDescription>This popover appears on bottom.</PopoverDescription>
        </PopoverContent>
      </Popover>
    </>
  );
}