Dropdown Menu

import { Button } from "@/components/ui/button" import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuPortal,  DropdownMenuSeparator,  DropdownMenuShortcut,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"  export function DropdownMenuDemo() {  return (  <DropdownMenu>  <DropdownMenuTrigger asChild>  <Button variant="outline">Open</Button>  </DropdownMenuTrigger>  <DropdownMenuContent className="w-56" align="start">  <DropdownMenuLabel>My Account</DropdownMenuLabel>  <DropdownMenuGroup>  <DropdownMenuItem>  Profile  <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>  </DropdownMenuItem>  <DropdownMenuItem>  Billing  <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>  </DropdownMenuItem>  <DropdownMenuItem>  Settings  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>  </DropdownMenuItem>  <DropdownMenuItem>  Keyboard shortcuts  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>  </DropdownMenuItem>  </DropdownMenuGroup>  <DropdownMenuSeparator />  <DropdownMenuGroup>  <DropdownMenuItem>Team</DropdownMenuItem>  <DropdownMenuSub>  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>  <DropdownMenuPortal>  <DropdownMenuSubContent>  <DropdownMenuItem>Email</DropdownMenuItem>  <DropdownMenuItem>Message</DropdownMenuItem>  <DropdownMenuSeparator />  <DropdownMenuItem>More...</DropdownMenuItem>  </DropdownMenuSubContent>  </DropdownMenuPortal>  </DropdownMenuSub>  <DropdownMenuItem>  New Team  <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>  </DropdownMenuItem>  </DropdownMenuGroup>  <DropdownMenuSeparator />  <DropdownMenuItem>GitHub</DropdownMenuItem>  <DropdownMenuItem>Support</DropdownMenuItem>  <DropdownMenuItem disabled>API</DropdownMenuItem>  <DropdownMenuSeparator />  <DropdownMenuItem>  Log out  <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>  </DropdownMenuItem>  </DropdownMenuContent>  </DropdownMenu>  ) } 

"use client"  import * as React from "react" import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"  import { Button } from "@/components/ui/button" import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuLabel,  DropdownMenuSeparator,  DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"  type Checked = DropdownMenuCheckboxItemProps["checked"]  export function DropdownMenuCheckboxes() {  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)  const [showPanel, setShowPanel] = React.useState<Checked>(false)   return (  <DropdownMenu>  <DropdownMenuTrigger asChild>  <Button variant="outline">Open</Button>  </DropdownMenuTrigger>  <DropdownMenuContent className="w-56">  <DropdownMenuLabel>Appearance</DropdownMenuLabel>  <DropdownMenuSeparator />  <DropdownMenuCheckboxItem  checked={showStatusBar}  onCheckedChange={setShowStatusBar}  >  Status Bar  </DropdownMenuCheckboxItem>  <DropdownMenuCheckboxItem  checked={showActivityBar}  onCheckedChange={setShowActivityBar}  disabled  >  Activity Bar  </DropdownMenuCheckboxItem>  <DropdownMenuCheckboxItem  checked={showPanel}  onCheckedChange={setShowPanel}  >  Panel  </DropdownMenuCheckboxItem>  </DropdownMenuContent>  </DropdownMenu>  ) } 

"use client"  import * as React from "react"  import { Button } from "@/components/ui/button" import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuLabel,  DropdownMenuRadioGroup,  DropdownMenuRadioItem,  DropdownMenuSeparator,  DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"  export function DropdownMenuRadioGroupDemo() {  const [position, setPosition] = React.useState("bottom")   return (  <DropdownMenu>  <DropdownMenuTrigger asChild>  <Button variant="outline">Open</Button>  </DropdownMenuTrigger>  <DropdownMenuContent className="w-56">  <DropdownMenuLabel>Panel Position</DropdownMenuLabel>  <DropdownMenuSeparator />  <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>  <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>  <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>  <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>  </DropdownMenuRadioGroup>  </DropdownMenuContent>  </DropdownMenu>  ) }