DrawerDirections() — ui Function Reference

Architecture documentation for the DrawerDirections() function in drawer-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ DrawerDirections() — ui Function Reference

Dependency Diagram

graph TD
  6291bfaa_8d6f_e322_6c91_704702dbf840["DrawerDirections()"]
  04594a08_934d_bf94_ee7c_beaa409cb7c4["drawer-demo.tsx"]
  6291bfaa_8d6f_e322_6c91_704702dbf840 -->|defined in| 04594a08_934d_bf94_ee7c_beaa409cb7c4
  style 6291bfaa_8d6f_e322_6c91_704702dbf840 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/drawer-demo.tsx lines 186–228

function DrawerDirections() {
  return (
    <>
      {directions.map((direction) => (
        <Drawer key={direction} direction={direction}>
          <DrawerTrigger asChild>
            <Button variant="outline" className="capitalize">
              {direction}
            </Button>
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>Move Goal</DrawerTitle>
              <DrawerDescription>
                Set your daily activity goal.
              </DrawerDescription>
            </DrawerHeader>
            <div className="overflow-y-auto px-4 text-sm">
              {Array.from({ length: 10 }).map((_, index) => (
                <p key={index} className="mb-4 leading-normal">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
              ))}
            </div>
            <DrawerFooter>
              <Button>Submit</Button>
              <DrawerClose asChild>
                <Button variant="outline">Cancel</Button>
              </DrawerClose>
            </DrawerFooter>
          </DrawerContent>
        </Drawer>
      ))}
    </>
  )
}