Drawer Panel

Wrapper cho Drawer để chuẩn hóa header, body, footer và preset kích thước trong các flow ưu tiên mobile.

1. Import

Import root, trigger và drawer panel wrapper.

import {
  DrawerPanel,
  DrawerPanelRoot,
  DrawerPanelTrigger,
} from "@/design-system/components/ui/drawer-panel"

2. Props

DrawerPanel kế thừa toàn bộ props của DrawerContent.

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

3. Usages

Các pattern phổ biến cho drawer wrapper.

import {
  DrawerPanel,
  DrawerPanelRoot,
  DrawerPanelTrigger,
} from "@/design-system/components/ui/drawer-panel";
import { Button } from "@/design-system/components/ui/button";
import { Input } from "@/design-system/components/ui/input";

export function Example() {
  return (
    <DrawerPanelRoot>
      <DrawerPanelTrigger asChild>
        <Button variant="outline">Mở drawer</Button>
      </DrawerPanelTrigger>
      <DrawerPanel
        title="Tạo mới địa chỉ"
        description="Phù hợp cho mobile flow hoặc thao tác nhanh."
        footer={
          <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
            <Button variant="outline">Đóng</Button>
            <Button>Xác nhận</Button>
          </div>
        }
      >
        <div className="grid gap-3">
          <Input label="Tên người nhận" placeholder="Nguyễn Văn A" />
          <Input label="Số điện thoại" placeholder="0901234567" />
        </div>
      </DrawerPanel>
    </DrawerPanelRoot>
  );
}