Popover Panel

Wrapper cấp cao cho Popover với layout chuẩn gồm header, body, footer và preset kích thước để dùng đồng bộ giữa nhiều màn.

1. Import

Import các phần cần dùng cho popover panel.

import {
  PopoverPanel,
  PopoverPanelRoot,
  PopoverPanelTrigger,
} from "@/design-system/components/ui/popover-panel"

2. Props

PopoverPanel kế thừa toàn bộ props của PopoverContent.

Prop	Type	Default
size	"sm" \| "md" \| "lg" \| "xl" \| "auto"	"md"
title	React.ReactNode	--
description	React.ReactNode	--
footer	React.ReactNode	--
className	string	--
side	"top" \| "right" \| "bottom" \| "left"	"bottom"

3. Usages

Các pattern phổ biến khi dùng popover panel.

import {
  PopoverPanel,
  PopoverPanelRoot,
  PopoverPanelTrigger,
} from "@/design-system/components/ui/popover-panel";
import { Button } from "@/design-system/components/ui/button";
import { Input } from "@/design-system/components/ui/input";

export function Example() {
  return (
    <PopoverPanelRoot>
      <PopoverPanelTrigger render={<Button variant="outline">Mở bộ lọc</Button>} />
      <PopoverPanel
        title="Bộ lọc nhanh"
        description="Áp dụng các điều kiện lọc thường dùng."
        footer={<Button>Lưu bộ lọc</Button>}
      >
        <div className="grid gap-3">
          <Input label="Từ khóa" placeholder="Nhập từ khóa" />
          <Input label="Mã đơn hàng" placeholder="VD: DH-1024" />
        </div>
      </PopoverPanel>
    </PopoverPanelRoot>
  );
}