Files
shadcn/apps/v4/examples/base/dropdown-menu-checkboxes-icons.tsx
zeekay 16c4453cc1 feat: sync with upstream shadcn/ui (through [email protected])
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in:
- [email protected] through [email protected] releases
- New apps/v4 directory structure
- Registry system improvements and MCP server
- Framework support (Vue, Svelte, React Native)
- New templates (vite-app, monorepo-next, laravel)
- Zod 4 compatibility (scoped override for zod@>4)
- Test fixture corrections for alias resolution

All 867 merge conflicts resolved preserving Hanzo customizations.
1020/1020 shadcn tests pass.
2026-02-09 10:44:26 -08:00

62 lines
1.8 KiB
TypeScript

"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react"
export function DropdownMenuCheckboxesIcons() {
const [notifications, setNotifications] = React.useState({
email: true,
sms: false,
push: true,
})
return (
<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline" />}>
Notifications
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48">
<DropdownMenuGroup>
<DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={notifications.email}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, email: checked === true })
}
>
<MailIcon />
Email notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.sms}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, sms: checked === true })
}
>
<MessageSquareIcon />
SMS notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.push}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, push: checked === true })
}
>
<BellIcon />
Push notifications
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}