Drawer

import { Drawer } from "density-base-ui";

export default function DrawerExample() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Backdrop className="drawer-example-backdrop" />
        <Drawer.Popup className="drawer-example-popup">
          <Drawer.Content className="drawer-example-content">
            <Drawer.Title className="drawer-example-title">
              Filters
            </Drawer.Title>
            <Drawer.Description className="drawer-example-description">
              Refine visible rows by status, owner, and update time.
            </Drawer.Description>
            <div className="drawer-example-grid">
              <span>Status</span>
              <strong>Open</strong>
              <span>Owner</span>
              <strong>Design</strong>
              <span>Updated</span>
              <strong>Today</strong>
            </div>
            <Drawer.Close density-emphasis="primary">
              Apply filters
            </Drawer.Close>
          </Drawer.Content>
        </Drawer.Popup>
      </Drawer.Portal>
    </Drawer.Root>
  );
}