Drawer

import { Drawer } from '@smart-tv/ui';

import { useState } from 'react';
import { Drawer, Button } from '@smart-tv/ui';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button focusKey="open-drawer" onEnterPress={() => setOpen(true)}>
        Open Drawer
      </Button>

      <Drawer
        open={open}
        onClose={() => setOpen(false)}
      >
        <h2>Drawer Content</h2>
        <Button focusKey="close" onEnterPress={() => setOpen(false)}>
          Close
        </Button>
      </Drawer>
    </>
  );
}

// Left side drawer (default)
<Drawer open={open} side="left" onClose={handleClose}>
  <nav>Navigation Menu</nav>
</Drawer>

// Right side drawer
<Drawer open={open} side="right" onClose={handleClose}>
  <aside>Settings Panel</aside>
</Drawer>

// Top drawer
<Drawer open={open} side="top" onClose={handleClose}>
  <div>Notifications</div>
</Drawer>

// Bottom drawer
<Drawer open={open} side="bottom" onClose={handleClose}>
  <div>Player Controls</div>
</Drawer>

// Custom width for left/right drawers
<Drawer
  open={open}
  side="left"
  width="400px"
  onClose={handleClose}
>
  <div>Wide drawer content</div>
</Drawer>

// Custom height for top/bottom drawers
<Drawer
  open={open}
  side="bottom"
  height="300px"
  onClose={handleClose}
>
  <div>Tall drawer content</div>
</Drawer>

// Responsive width
<Drawer
  open={open}
  width="min(400px, 90vw)"
  onClose={handleClose}
>
  <div>Responsive drawer</div>
</Drawer>

// With backdrop overlay (default)
<Drawer
  open={open}
  overlay={true}
  onClose={handleClose}
>
  <div>Content</div>
</Drawer>

// Without overlay
<Drawer
  open={open}
  overlay={false}
  onClose={handleClose}
>
  <div>Content without backdrop</div>
</Drawer>

// Custom overlay opacity
<Drawer
  open={open}
  overlay={true}
  className="[&>.overlay]:bg-black/80"
  onClose={handleClose}
>
  <div>Darker overlay</div>
</Drawer>

// Close on backdrop click
<Drawer
  open={open}
  closeOnBackdrop={true}
  onClose={handleClose}
>
  <div>Click outside to close</div>
</Drawer>

// Close on Escape key
<Drawer
  open={open}
  closeOnEsc={true}
  onClose={handleClose}
>
  <div>Press ESC to close</div>
</Drawer>

// Both close methods
<Drawer
  open={open}
  closeOnBackdrop={true}
  closeOnEsc={true}
  onClose={handleClose}
>
  <div>Multiple close options</div>
</Drawer>

import { Drawer, Section, Button } from '@smart-tv/ui';

function NavigationDrawer({ open, onClose }) {
  return (
    <Drawer
      open={open}
      side="left"
      width="300px"
      onClose={onClose}
      closeOnBackdrop={true}
    >
      <Section
        focusKey="nav-menu"
        className="h-full p-6"
        isFocusBoundary
        focusBoundaryDirections={['left']}
      >
        <h2 className="text-2xl mb-6">Menu</h2>

        <nav className="space-y-2">
          <Button focusKey="nav-home" onEnterPress={() => navigate('/')}>
            Home
          </Button>
          <Button focusKey="nav-movies" onEnterPress={() => navigate('/movies')}>
            Movies
          </Button>
          <Button focusKey="nav-series" onEnterPress={() => navigate('/series')}>
            TV Series
          </Button>
          <Button focusKey="nav-settings" onEnterPress={() => navigate('/settings')}>
            Settings
          </Button>
        </nav>
      </Section>
    </Drawer>
  );
}

<Drawer
  open={open}
  side="right"
  onClose={handleClose}
  className="
    transition-transform
    duration-300
    ease-out
    data-[open=true]:translate-x-0
    data-[open=false]:translate-x-full
  "
>
  <div>Smooth slide animation</div>
</Drawer>