Sheet Panel

Wrapper cho Sheet với layout chuẩn hóa, có preset size và vẫn cho phép forward toàn bộ props của SheetContent.

1. Import

Import root, trigger và panel content.

import {
  SheetPanel,
  SheetPanelRoot,
  SheetPanelTrigger,
} from "@/design-system/components/ui/sheet-panel"

2. Props

SheetPanel kế thừa toàn bộ props của SheetContent.

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

3. Usages

Các pattern phổ biến cho side panel.

import {
  SheetPanel,
  SheetPanelRoot,
  SheetPanelTrigger,
} from "@/design-system/components/ui/sheet-panel";
import { Button } from "@/design-system/components/ui/button";
import { Input } from "@/design-system/components/ui/input";

export function Example() {
  return (
    <SheetPanelRoot>
      <SheetPanelTrigger render={<Button variant="outline">Mở panel</Button>} />
      <SheetPanel
        title="Cập nhật hồ sơ"
        description="Dùng layout thống nhất cho side panel."
        footer={
          <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
            <Button variant="outline">Hủy</Button>
            <Button>Lưu thay đổi</Button>
          </div>
        }
      >
        <div className="grid gap-3">
          <Input label="Họ và tên" placeholder="Nguyễn Văn A" />
          <Input label="Email" placeholder="name@company.vn" />
        </div>
      </SheetPanel>
    </SheetPanelRoot>
  );
}