mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 14:08:47 +00:00
137b1c12b7
* feat: add phosphor icons to base ui * feat_ add phosphor to blocks * feat: add phosphor to radix blocks * feat: add phosphor to radix ui * feat: add phosphor to radix example * feat: add missing phosphor icons * fix: rename broken icons * chore: format files * fix: add missing phosphor icons * chore: build registry --------- Co-authored-by: shadcn <m@shadcn.com>
628 lines
19 KiB
TypeScript
628 lines
19 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
Example,
|
|
ExampleWrapper,
|
|
} from "@/registry/bases/base/components/example"
|
|
import { Button } from "@/registry/bases/base/ui/button"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/registry/bases/base/ui/dialog"
|
|
import {
|
|
Menubar,
|
|
MenubarCheckboxItem,
|
|
MenubarContent,
|
|
MenubarGroup,
|
|
MenubarItem,
|
|
MenubarMenu,
|
|
MenubarRadioGroup,
|
|
MenubarRadioItem,
|
|
MenubarSeparator,
|
|
MenubarShortcut,
|
|
MenubarSub,
|
|
MenubarSubContent,
|
|
MenubarSubTrigger,
|
|
MenubarTrigger,
|
|
} from "@/registry/bases/base/ui/menubar"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export default function MenubarExample() {
|
|
return (
|
|
<ExampleWrapper>
|
|
<MenubarBasic />
|
|
<MenubarWithSubmenu />
|
|
<MenubarWithCheckboxes />
|
|
<MenubarWithRadio />
|
|
<MenubarWithIcons />
|
|
<MenubarWithShortcuts />
|
|
<MenubarFormat />
|
|
<MenubarInsert />
|
|
<MenubarDestructive />
|
|
<MenubarInDialog />
|
|
</ExampleWrapper>
|
|
)
|
|
}
|
|
|
|
function MenubarBasic() {
|
|
return (
|
|
<Example title="Basic">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>File</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
New Window <MenubarShortcut>⌘N</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem disabled>New Incognito Window</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem>
|
|
Print... <MenubarShortcut>⌘P</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Edit</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem>Cut</MenubarItem>
|
|
<MenubarItem>Copy</MenubarItem>
|
|
<MenubarItem>Paste</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarWithSubmenu() {
|
|
return (
|
|
<Example title="With Submenu">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>File</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarSub>
|
|
<MenubarSubTrigger>Share</MenubarSubTrigger>
|
|
<MenubarSubContent>
|
|
<MenubarItem>Email link</MenubarItem>
|
|
<MenubarItem>Messages</MenubarItem>
|
|
<MenubarItem>Notes</MenubarItem>
|
|
</MenubarSubContent>
|
|
</MenubarSub>
|
|
<MenubarSeparator />
|
|
<MenubarItem>
|
|
Print... <MenubarShortcut>⌘P</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Edit</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarSub>
|
|
<MenubarSubTrigger>Find</MenubarSubTrigger>
|
|
<MenubarSubContent>
|
|
<MenubarItem>Find...</MenubarItem>
|
|
<MenubarItem>Find Next</MenubarItem>
|
|
<MenubarItem>Find Previous</MenubarItem>
|
|
</MenubarSubContent>
|
|
</MenubarSub>
|
|
<MenubarSeparator />
|
|
<MenubarItem>Cut</MenubarItem>
|
|
<MenubarItem>Copy</MenubarItem>
|
|
<MenubarItem>Paste</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarWithCheckboxes() {
|
|
return (
|
|
<Example title="With Checkboxes">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>View</MenubarTrigger>
|
|
<MenubarContent className="w-64">
|
|
<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
|
|
<MenubarCheckboxItem checked>
|
|
Always Show Full URLs
|
|
</MenubarCheckboxItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem inset>
|
|
Reload <MenubarShortcut>⌘R</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem disabled inset>
|
|
Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Format</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
|
|
<MenubarCheckboxItem>Code</MenubarCheckboxItem>
|
|
<MenubarCheckboxItem>Superscript</MenubarCheckboxItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarWithRadio() {
|
|
const [user, setUser] = React.useState("benoit")
|
|
const [theme, setTheme] = React.useState("system")
|
|
|
|
return (
|
|
<Example title="With Radio">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Profiles</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarRadioGroup value={user} onValueChange={setUser}>
|
|
<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
|
|
<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
|
|
<MenubarRadioItem value="luis">Luis</MenubarRadioItem>
|
|
</MenubarRadioGroup>
|
|
<MenubarSeparator />
|
|
<MenubarItem inset>Edit...</MenubarItem>
|
|
<MenubarItem inset>Add Profile...</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Theme</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarRadioGroup value={theme} onValueChange={setTheme}>
|
|
<MenubarRadioItem value="light">Light</MenubarRadioItem>
|
|
<MenubarRadioItem value="dark">Dark</MenubarRadioItem>
|
|
<MenubarRadioItem value="system">System</MenubarRadioItem>
|
|
</MenubarRadioGroup>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarWithIcons() {
|
|
return (
|
|
<Example title="With Icons">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>File</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="FileIcon"
|
|
tabler="IconFile"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileIcon"
|
|
/>
|
|
New File <MenubarShortcut>⌘N</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="FolderIcon"
|
|
tabler="IconFolder"
|
|
hugeicons="FolderIcon"
|
|
phosphor="FolderIcon"
|
|
/>
|
|
Open Folder
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="SaveIcon"
|
|
tabler="IconDeviceFloppy"
|
|
hugeicons="FloppyDiskIcon"
|
|
phosphor="FloppyDiskIcon"
|
|
/>
|
|
Save <MenubarShortcut>⌘S</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>More</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarGroup>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="CircleDashedIcon"
|
|
tabler="IconCircleDashed"
|
|
hugeicons="DashedLineCircleIcon"
|
|
phosphor="CircleDashedIcon"
|
|
/>
|
|
Settings
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="CircleDashedIcon"
|
|
tabler="IconCircleDashed"
|
|
hugeicons="DashedLineCircleIcon"
|
|
phosphor="CircleDashedIcon"
|
|
/>
|
|
Help
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="CircleDashedIcon"
|
|
tabler="IconCircleDashed"
|
|
hugeicons="DashedLineCircleIcon"
|
|
phosphor="CircleDashedIcon"
|
|
/>
|
|
Delete
|
|
</MenubarItem>
|
|
</MenubarGroup>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarWithShortcuts() {
|
|
return (
|
|
<Example title="With Shortcuts">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>File</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
New Window <MenubarShortcut>⌘N</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
Print... <MenubarShortcut>⌘P</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Edit</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem>
|
|
Cut <MenubarShortcut>⌘X</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
Copy <MenubarShortcut>⌘C</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
Paste <MenubarShortcut>⌘V</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarFormat() {
|
|
return (
|
|
<Example title="Format">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Format</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="BoldIcon"
|
|
tabler="IconBold"
|
|
hugeicons="TextBoldIcon"
|
|
phosphor="TextBIcon"
|
|
/>
|
|
Bold <MenubarShortcut>⌘B</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="ItalicIcon"
|
|
tabler="IconItalic"
|
|
hugeicons="TextItalicIcon"
|
|
phosphor="TextItalicIcon"
|
|
/>
|
|
Italic <MenubarShortcut>⌘I</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="UnderlineIcon"
|
|
tabler="IconUnderline"
|
|
hugeicons="TextUnderlineIcon"
|
|
phosphor="TextUnderlineIcon"
|
|
/>
|
|
Underline <MenubarShortcut>⌘U</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
|
|
<MenubarCheckboxItem>Code</MenubarCheckboxItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>View</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>
|
|
<MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem inset>Zoom In</MenubarItem>
|
|
<MenubarItem inset>Zoom Out</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarInsert() {
|
|
return (
|
|
<Example title="Insert">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Insert</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarSub>
|
|
<MenubarSubTrigger>
|
|
<IconPlaceholder
|
|
lucide="ImageIcon"
|
|
tabler="IconPhoto"
|
|
hugeicons="ImageIcon"
|
|
phosphor="ImageIcon"
|
|
/>
|
|
Media
|
|
</MenubarSubTrigger>
|
|
<MenubarSubContent>
|
|
<MenubarItem>Image</MenubarItem>
|
|
<MenubarItem>Video</MenubarItem>
|
|
<MenubarItem>Audio</MenubarItem>
|
|
</MenubarSubContent>
|
|
</MenubarSub>
|
|
<MenubarSeparator />
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="LinkIcon"
|
|
tabler="IconLink"
|
|
hugeicons="LinkIcon"
|
|
phosphor="LinkIcon"
|
|
/>
|
|
Link <MenubarShortcut>⌘K</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="TableIcon"
|
|
tabler="IconTable"
|
|
hugeicons="TableIcon"
|
|
phosphor="TableIcon"
|
|
/>
|
|
Table
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Tools</MenubarTrigger>
|
|
<MenubarContent className="w-44">
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="SearchIcon"
|
|
tabler="IconSearch"
|
|
hugeicons="SearchIcon"
|
|
phosphor="MagnifyingGlassIcon"
|
|
/>
|
|
Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="CheckIcon"
|
|
tabler="IconCheck"
|
|
hugeicons="Tick02Icon"
|
|
phosphor="CheckIcon"
|
|
/>
|
|
Spell Check
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarDestructive() {
|
|
return (
|
|
<Example title="Destructive">
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>File</MenubarTrigger>
|
|
<MenubarContent className="w-40">
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="FileIcon"
|
|
tabler="IconFile"
|
|
hugeicons="FileIcon"
|
|
phosphor="FileIcon"
|
|
/>
|
|
New File <MenubarShortcut>⌘N</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="FolderIcon"
|
|
tabler="IconFolder"
|
|
hugeicons="FolderIcon"
|
|
phosphor="FolderIcon"
|
|
/>
|
|
Open Folder
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="DeleteIcon"
|
|
phosphor="TrashIcon"
|
|
/>
|
|
Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Account</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="UserIcon"
|
|
tabler="IconUser"
|
|
hugeicons="UserIcon"
|
|
phosphor="UserIcon"
|
|
/>
|
|
Profile
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="SettingsIcon"
|
|
tabler="IconSettings"
|
|
hugeicons="SettingsIcon"
|
|
phosphor="GearIcon"
|
|
/>
|
|
Settings
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="LogOutIcon"
|
|
tabler="IconLogout"
|
|
hugeicons="LogoutIcon"
|
|
phosphor="SignOutIcon"
|
|
/>
|
|
Sign out
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="DeleteIcon"
|
|
phosphor="TrashIcon"
|
|
/>
|
|
Delete
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</Example>
|
|
)
|
|
}
|
|
|
|
function MenubarInDialog() {
|
|
return (
|
|
<Example title="In Dialog">
|
|
<Dialog>
|
|
<DialogTrigger render={<Button variant="outline" />}>
|
|
Open Dialog
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Menubar Example</DialogTitle>
|
|
<DialogDescription>
|
|
Use the menubar below to see the menu options.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<Menubar>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>File</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="CopyIcon"
|
|
tabler="IconCopy"
|
|
hugeicons="CopyIcon"
|
|
phosphor="CopyIcon"
|
|
/>
|
|
Copy
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="ScissorsIcon"
|
|
tabler="IconCut"
|
|
hugeicons="ScissorIcon"
|
|
phosphor="ScissorsIcon"
|
|
/>
|
|
Cut
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
<IconPlaceholder
|
|
lucide="ClipboardPasteIcon"
|
|
tabler="IconClipboard"
|
|
hugeicons="ClipboardIcon"
|
|
phosphor="ClipboardIcon"
|
|
/>
|
|
Paste
|
|
</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarSub>
|
|
<MenubarSubTrigger>More Options</MenubarSubTrigger>
|
|
<MenubarSubContent>
|
|
<MenubarItem>Save Page...</MenubarItem>
|
|
<MenubarItem>Create Shortcut...</MenubarItem>
|
|
<MenubarItem>Name Window...</MenubarItem>
|
|
<MenubarSeparator />
|
|
<MenubarItem>Developer Tools</MenubarItem>
|
|
</MenubarSubContent>
|
|
</MenubarSub>
|
|
<MenubarSeparator />
|
|
<MenubarItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="DeleteIcon"
|
|
phosphor="TrashIcon"
|
|
/>
|
|
Delete
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
<MenubarMenu>
|
|
<MenubarTrigger>Edit</MenubarTrigger>
|
|
<MenubarContent>
|
|
<MenubarItem>
|
|
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
<MenubarItem>
|
|
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
|
|
</MenubarItem>
|
|
</MenubarContent>
|
|
</MenubarMenu>
|
|
</Menubar>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Example>
|
|
)
|
|
}
|