Drawer

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export default function Basic() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Add Task</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Add Task</DrawerTitle>
            <DrawerDescription>
              New tasks are added to the default category.
            </DrawerDescription>
          </DrawerHeader>
          <div className="grid gap-4 p-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Task Name</Label>
              <Input id="name" placeholder="Enter task name here" />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="assignee">Assignee</Label>
              <Select>
                <SelectTrigger>
                  <SelectValue id="assignee" placeholder="Select someone" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">Adam</SelectItem>
                  <SelectItem value="2">Ruth</SelectItem>
                  <SelectItem value="3">Taylor</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <DrawerFooter>
            <Button type="submit">Add</Button>
            <DrawerClose asChild>
              <Button type="button" variant="outline">
                Cancel
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
}

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

export default function Content() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Only Content</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Please login again.</DrawerTitle>
          </DrawerHeader>
          <p className="p-4 text-muted-foreground">
            Your session has expired. Please login again to continue using the
            application.
          </p>
          <DrawerFooter>
            <Button type="submit">Login</Button>
            <DrawerClose asChild>
              <Button type="button" variant="outline">
                Cancel
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
}

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Login() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline">Login</Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Login</DrawerTitle>
            <DrawerDescription>
              Please login again to continue using the application.
            </DrawerDescription>
          </DrawerHeader>
          <form className="grid gap-4 p-4">
            <div className="grid gap-2">
              <Label htmlFor="email">Email</Label>
              <Input
                required
                id="email"
                type="email"
                autoComplete="username"
                placeholder="team@mynaui.com"
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="password">Password</Label>
              <Input
                required
                id="password"
                type="password"
                placeholder="••••••••••"
                autoComplete="current-password"
              />
            </div>
          </form>
          <DrawerFooter>
            <Button type="submit">Login</Button>
            <DrawerClose asChild>
              <Button type="button" variant="outline">
                Cancel
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
}

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@/components/ui/drawer";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { User, Cog } from "@mynaui/icons-react";

export default function ProfileDrawer() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2 text-sm">
          <User className="size-4 stroke-2" /> Profile
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>User Profile</DrawerTitle>
            <DrawerDescription>Manage your account settings</DrawerDescription>
          </DrawerHeader>
          <div className="flex items-center gap-3 p-4">
            <Avatar className="size-9">
              <AvatarFallback>JD</AvatarFallback>
            </Avatar>
            <div className="text-sm">
              <div className="font-medium">Jane Doe</div>
              <div className="text-muted-foreground">jane@example.com</div>
            </div>
          </div>
          <DrawerFooter>
            <Button size="sm" className="flex items-center gap-2">
              <Cog className="size-4" /> Settings
            </Button>
            <DrawerClose asChild>
              <Button size="sm" variant="outline">
                Close
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
}

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@/components/ui/drawer";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Filter } from "@mynaui/icons-react";

export default function FilterDrawer() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2 text-sm">
          <Filter className="size-4 stroke-2" /> Filters
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Filter Results</DrawerTitle>
            <DrawerDescription>Select the filters to apply.</DrawerDescription>
          </DrawerHeader>
          <form className="grid gap-4 p-4 text-sm">
            <div className="flex items-center gap-2">
              <Checkbox id="in-stock" />
              <Label htmlFor="in-stock">In Stock</Label>
            </div>
            <div className="flex items-center gap-2">
              <Checkbox id="on-sale" />
              <Label htmlFor="on-sale">On Sale</Label>
            </div>
            <div className="flex items-center gap-2">
              <Checkbox id="new" />
              <Label htmlFor="new">New</Label>
            </div>
          </form>
          <DrawerFooter>
            <Button size="sm" type="submit">
              Apply
            </Button>
            <DrawerClose asChild>
              <Button size="sm" variant="outline">
                Cancel
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
}

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@/components/ui/drawer";
import { InfoCircle } from "@mynaui/icons-react";

export default function InfoDrawer() {
  return (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="outline" className="flex items-center gap-2 text-sm">
          <InfoCircle className="size-4 stroke-2" /> More Info
        </Button>
      </DrawerTrigger>
      <DrawerContent>
        <div className="mx-auto w-full max-w-sm">
          <DrawerHeader>
            <DrawerTitle>Additional Information</DrawerTitle>
            <DrawerDescription>
              Learn more about this feature below.
            </DrawerDescription>
          </DrawerHeader>
          <div className="p-4 text-sm text-muted-foreground">
            This drawer provides extra context and details that may help you make
            better decisions when using our product.
          </div>
          <DrawerFooter>
            <DrawerClose asChild>
              <Button size="sm" variant="outline">
                Close
              </Button>
            </DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  );
}