پاپ‌اور (Popover)

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
  Button,
  Separator,
} from '@parto/ui';

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">فیلترها</Button>
  </PopoverTrigger>
  <PopoverContent className="w-64" align="start">
    <div className="space-y-2">
      <h4 className="font-medium">محدوده تاریخ</h4>
      <p className="text-sm text-muted-foreground">یک بازه زمانی انتخاب کنید.</p>
    </div>
    <Separator className="my-3" />
    <div className="grid grid-cols-2 gap-2 text-sm">
      <Button variant="outline" size="sm">امروز</Button>
      <Button variant="outline" size="sm">این هفته</Button>
      <Button variant="outline" size="sm">این ماه</Button>
      <Button variant="outline" size="sm">امسال</Button>
    </div>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">تنظیمات</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <div className="space-y-2">
        <h4 className="font-medium">ابعاد</h4>
        <p className="text-sm text-muted-foreground">
          تنظیم عرض و ارتفاع
        </p>
      </div>
      <div className="grid gap-2">
        <div className="grid grid-cols-3 items-center gap-4">
          <label htmlFor="width">عرض</label>
          <Input
            id="width"
            defaultValue="100%"
            className="col-span-2 h-8"
          />
        </div>
        <div className="grid grid-cols-3 items-center gap-4">
          <label htmlFor="height">ارتفاع</label>
          <Input
            id="height"
            defaultValue="25px"
            className="col-span-2 h-8"
          />
        </div>
      </div>
    </div>
  </PopoverContent>
</Popover>

const [open, setOpen] = React.useState(false);

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="outline">منو</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="space-y-2">
      <p>محتوای کنترل شده</p>
      <Button onClick={() => setOpen(false)}>بستن</Button>
    </div>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger>باز کردن</PopoverTrigger>
  <PopoverContent side="bottom" align="start">
    <p>نمایش در پایین، تراز راست</p>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">گزینه‌ها</Button>
  </PopoverTrigger>
  <PopoverContent className="w-56">
    <div className="space-y-1">
      <Button variant="ghost" className="w-full justify-start">
        گزینه ۱
      </Button>
      <Button variant="ghost" className="w-full justify-start">
        گزینه ۲
      </Button>
      <Button variant="ghost" className="w-full justify-start">
        گزینه ۳
      </Button>
    </div>
  </PopoverContent>
</Popover>