Filters from each side

// apps/docs/examples/ui/sheet.tsx'use client';
import {useState} from 'react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {Checkbox} from '@workspace/active-ui/components/primitives/checkbox';import {  Field,  FieldGroup,  FieldLabel,} from '@workspace/active-ui/components/primitives/field';import {  Sheet,  SheetClose,  SheetContent,  SheetDescription,  SheetFooter,  SheetHeader,  SheetTitle,  SheetTrigger,} from '@workspace/active-ui/components/primitives/sheet';
const SIDES = ['right', 'left', 'top', 'bottom'] as const;const STATUSES = ['Active', 'Paused', 'Closed'];
/** * A panel that slides in from an edge, for work beside the page: here a set * of filters that applies only when the reader confirms. The panel keeps its * own draft; `SheetClose` closes it from the footer buttons. */export default function SheetExample() {  const [side, setSide] = useState<(typeof SIDES)[number]>('right');  const [applied, setApplied] = useState<string[]>(['Active']);  const [draft, setDraft] = useState<string[]>(applied);  return (    <div className="flex flex-col items-center gap-4">      <div className="flex flex-wrap justify-center gap-2">        {SIDES.map((option) => (          <Sheet            key={option}            onOpenChange={(open) => {              if (open) {                setSide(option);                setDraft(applied);              }            }}          >            <SheetTrigger render={<Button variant="outline" />}>              Filters ({option})            </SheetTrigger>            <SheetContent side={side} closeLabel="Close filters">              <SheetHeader>                <SheetTitle>Filter schemes</SheetTitle>                <SheetDescription>                  Show only the schemes with these statuses.                </SheetDescription>              </SheetHeader>              <FieldGroup className="gap-3 px-4">                {STATUSES.map((status) => (                  <Field key={status} orientation="horizontal">                    <Checkbox                      id={`sheet-${option}-${status}`}                      checked={draft.includes(status)}                      onCheckedChange={(checked) =>                        setDraft((current) =>                          checked                            ? [...current, status]                            : current.filter((value) => value !== status),                        )                      }                    />                    <FieldLabel htmlFor={`sheet-${option}-${status}`}>                      {status}                    </FieldLabel>                  </Field>                ))}              </FieldGroup>              <SheetFooter>                <SheetClose                  render={<Button />}                  onClick={() => setApplied(draft)}                >                  Apply filters                </SheetClose>                <SheetClose render={<Button variant="outline" />}>                  Cancel                </SheetClose>              </SheetFooter>            </SheetContent>          </Sheet>        ))}      </div>      <p className="text-muted-foreground text-sm">        Showing: {applied.length ? applied.join(', ') : 'nothing'}      </p>    </div>  );}