From the bottom with a handle, and from the side

// apps/docs/examples/ui/drawer.tsx'use client';
import {useState} from 'react';
import {formatCurrency} from '@workspace/active-format';import {Button} from '@workspace/active-ui/components/primitives/button';import {  Drawer,  DrawerClose,  DrawerContent,  DrawerDescription,  DrawerFooter,  DrawerHeader,  DrawerTitle,  DrawerTrigger,} from '@workspace/active-ui/components/primitives/drawer';
const AMOUNTS = [50, 100, 250];// Amounts are written by active-format, in the language of the page.const euro = (amount: number) =>  formatCurrency({amount, currency: 'EUR'}, 'en', {decimals: 0});
/** * A panel that slides up from the bottom and can be swiped away, the shape * of a quick choice on a phone. The swipe handle shows that it can be * dragged; `swipeDirection="right"` makes a side panel of the same kind. */export default function DrawerExample() {  const [amount, setAmount] = useState<number | null>(null);  return (    <div className="flex flex-col items-center gap-4">      <div className="flex flex-wrap justify-center gap-2">        <Drawer showSwipeHandle>          <DrawerTrigger render={<Button variant="outline" />}>            Add a contribution          </DrawerTrigger>          <DrawerContent>            <DrawerHeader>              <DrawerTitle>Extra contribution</DrawerTitle>              <DrawerDescription>                Choose an amount; it is collected with the next payment.              </DrawerDescription>            </DrawerHeader>            <div className="flex justify-center gap-2 p-4">              {AMOUNTS.map((value) => (                <DrawerClose                  key={value}                  render={<Button variant="outline" />}                  onClick={() => setAmount(value)}                >                  {euro(value)}                </DrawerClose>              ))}            </div>            <DrawerFooter>              <DrawerClose render={<Button variant="ghost" />}>                Not now              </DrawerClose>            </DrawerFooter>          </DrawerContent>        </Drawer>
        <Drawer swipeDirection="right">          <DrawerTrigger render={<Button variant="outline" />}>            Open the side drawer          </DrawerTrigger>          <DrawerContent>            <DrawerHeader>              <DrawerTitle>Recent activity</DrawerTitle>              <DrawerDescription>                Swipe to the right, press Escape or click outside to close.              </DrawerDescription>            </DrawerHeader>            <ul className="text-muted-foreground flex flex-col gap-2 p-4 text-sm">              <li>Statement sent to 214 participants</li>              <li>Contribution rate changed to 7.5%</li>              <li>Scheme renamed</li>            </ul>          </DrawerContent>        </Drawer>      </div>      <p className="text-muted-foreground text-sm">        Extra contribution: {amount === null ? 'none' : euro(amount)}      </p>    </div>  );}