Dropdown Menu

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDown, Config, User, Webcam } from "@mynaui/icons-react";

export default function Basic() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">
          Praveen Juge
          <ChevronDown className="-mr-1 ml-2 size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Praveen Juge</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <User className="mr-2 size-4" />
          My Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Config className="mr-2 size-4" />
          <span>Personal Settings</span>
          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />

        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <Webcam className="mr-2 size-4" />
            <span>Visibility</span>
          </DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <span>Online</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <span>Appear Offline</span>
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>

        <DropdownMenuSeparator />
        <DropdownMenuLabel inset>Current Status</DropdownMenuLabel>

        <DropdownMenuRadioGroup value="invisible">
          <DropdownMenuRadioItem value="online">Online</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="invisible">
            Invisible
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem disabled value="offline">
            Offline
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>

        <DropdownMenuSeparator />
        <DropdownMenuLabel inset>My Permissions</DropdownMenuLabel>

        <DropdownMenuCheckboxItem checked>Admin</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem>Member</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem disabled>Customer</DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Dots,
  Download,
  Folder,
  FolderPlus,
  Move,
  Share,
  Trash,
} from "@mynaui/icons-react";

export default function FolderDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="w-56 justify-between">
          <span className="flex items-center gap-2">
            <Folder className="size-5" />
            Folder Name
          </span>
          <Dots className="-mr-2 ml-2 size-7" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuItem>
          <FolderPlus className="mr-2 size-4" />
          New Folder
          <DropdownMenuShortcut>N</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Share className="mr-2 size-4" />
          <span>Share</span>
          <DropdownMenuShortcut>S</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Move className="mr-2 size-4" />
          <span>Move Folder</span>
          <DropdownMenuShortcut>M</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Download className="mr-2 size-4" />
          <span>Download</span>
          <DropdownMenuShortcut>D</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Trash className="mr-2 size-4" />
          <span>Remove</span>
          <DropdownMenuShortcut>R</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  ArrowUpDown,
  Mobile,
  Pen,
  Question,
  ShieldCheck,
  Truck,
} from "@mynaui/icons-react";

export default function HelpMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" className="rounded-full">
          <Question className="size-5" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuItem>
          <Truck className="mr-2 size-4" />
          Getting Started
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Mobile className="mr-2 size-4" />
          <span>Contact Us</span>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Pen className="mr-2 size-4" />
          <span>Blog</span>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <ShieldCheck className="mr-2 size-4" />
          <span>Security</span>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <ArrowUpDown className="mr-2 size-4" />
          <span>Changelog</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import {
  FilePlus,
  Pencil,
  Trash,
  Share
} from "@mynaui/icons-react";

export default function FileActions() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="text-sm">
          Actions
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-40">
        <DropdownMenuItem>
          <FilePlus className="stroke-2 size-4" /> New File
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Pencil className="stroke-2 size-4" /> Rename
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Share className="stroke-2 size-4" /> Share
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Trash className="stroke-2 size-4" /> Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuCheckboxItem,
} from "@/components/ui/dropdown-menu";
import { TypeBold, TypeItalic, TypeUnderline } from "@mynaui/icons-react";

export default function FormatMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="text-sm">
          Format
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-40">
        <DropdownMenuCheckboxItem checked>
          <TypeBold className="stroke-2 size-4" /> Bold
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem>
          <TypeItalic className="stroke-2 size-4" /> Italic
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem>
          <TypeUnderline className="stroke-2 size-4" /> Underline
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Clear Formatting</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
} from "@/components/ui/dropdown-menu";
import { Sun, Moon, Desktop } from "@mynaui/icons-react";

export default function ThemeSwitcher() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className="text-sm">
          Theme
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-40">
        <DropdownMenuRadioGroup value="system">
          <DropdownMenuRadioItem value="light">
            <Sun className="stroke-2 size-4" /> Light
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="dark">
            <Moon className="stroke-2 size-4" /> Dark
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="system">
            <Desktop className="stroke-2 size-4" /> System
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Reset to Default</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}