Skip to content

Commit 8c26d26

Browse files
TheOrcDevTheOrcDev
committed
feat(registry) add menubar component
1 parent 5ae48e8 commit 8c26d26

File tree

9 files changed

+643
-0
lines changed

9 files changed

+643
-0
lines changed

‎app/docs/components/menubar/page.tsx‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import { Metadata } from "next"
2+
3+
import { menubarMetaData } from "@/lib/metadata"
4+
import {
5+
Menubar,
6+
MenubarCheckboxItem,
7+
MenubarContent,
8+
MenubarItem,
9+
MenubarMenu,
10+
MenubarRadioGroup,
11+
MenubarRadioItem,
12+
MenubarSeparator,
13+
MenubarShortcut,
14+
MenubarSub,
15+
MenubarSubContent,
16+
MenubarSubTrigger,
17+
MenubarTrigger,
18+
} from "@/components/ui/8bit/menubar"
19+
import { Separator } from "@/components/ui/separator"
20+
21+
import CodeSnippet from "../code-snippet"
22+
import CopyCommandButton from "../copy-command-button"
23+
import InstallationCommands from "../installation-commands"
24+
import { OpenInV0Button } from "../open-in-v0-button"
25+
26+
export const metadata: Metadata = {
27+
title: "8-bit Menubar",
28+
description: "Displays an 8-bit menubar component.",
29+
openGraph: {
30+
images: menubarMetaData,
31+
},
32+
}
33+
34+
export default function MenubarPage() {
35+
return (
36+
<div className="flex flex-col gap-4">
37+
<div className="flex flex-col md:flex-row items-center justify-between gap-2">
38+
<h1 className="text-3xl font-bold">Menubar</h1>
39+
<CopyCommandButton
40+
copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-button.json`}
41+
command={"pnpm dlx shadcn@canary add 8bit-button"}
42+
/>
43+
</div>
44+
45+
<p className="text-muted-foreground">
46+
Displays an 8-bit menubar component.
47+
</p>
48+
49+
<div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
50+
<div className="flex items-center justify-between">
51+
<h2 className="text-sm text-muted-foreground sm:pl-3">
52+
8-bit menubar component
53+
</h2>
54+
55+
<div className="flex items-center gap-2">
56+
<OpenInV0Button name="8bit-menubar" className="w-fit" />
57+
</div>
58+
</div>
59+
<div className="flex items-center justify-center min-h-[400px] relative">
60+
<Menubar>
61+
<MenubarMenu>
62+
<MenubarTrigger>File</MenubarTrigger>
63+
<MenubarContent>
64+
<MenubarItem>
65+
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
66+
</MenubarItem>
67+
<MenubarItem>
68+
New Window <MenubarShortcut>⌘N</MenubarShortcut>
69+
</MenubarItem>
70+
<MenubarItem disabled>New Incognito Window</MenubarItem>
71+
<MenubarSeparator />
72+
<MenubarSub>
73+
<MenubarSubTrigger>Share</MenubarSubTrigger>
74+
<MenubarSubContent>
75+
<MenubarItem>Email link</MenubarItem>
76+
<MenubarItem>Messages</MenubarItem>
77+
<MenubarItem>Notes</MenubarItem>
78+
</MenubarSubContent>
79+
</MenubarSub>
80+
<MenubarSeparator />
81+
<MenubarItem>
82+
Print... <MenubarShortcut>⌘P</MenubarShortcut>
83+
</MenubarItem>
84+
</MenubarContent>
85+
</MenubarMenu>
86+
<MenubarMenu>
87+
<MenubarTrigger>Edit</MenubarTrigger>
88+
<MenubarContent>
89+
<MenubarItem>
90+
Undo <MenubarShortcut>⌘Z</MenubarShortcut>
91+
</MenubarItem>
92+
<MenubarItem>
93+
Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
94+
</MenubarItem>
95+
<MenubarSeparator />
96+
<MenubarSub>
97+
<MenubarSubTrigger>Find</MenubarSubTrigger>
98+
<MenubarSubContent>
99+
<MenubarItem>Search the web</MenubarItem>
100+
<MenubarSeparator />
101+
<MenubarItem>Find...</MenubarItem>
102+
<MenubarItem>Find Next</MenubarItem>
103+
<MenubarItem>Find Previous</MenubarItem>
104+
</MenubarSubContent>
105+
</MenubarSub>
106+
<MenubarSeparator />
107+
<MenubarItem>Cut</MenubarItem>
108+
<MenubarItem>Copy</MenubarItem>
109+
<MenubarItem>Paste</MenubarItem>
110+
</MenubarContent>
111+
</MenubarMenu>
112+
<MenubarMenu>
113+
<MenubarTrigger>View</MenubarTrigger>
114+
<MenubarContent>
115+
<MenubarCheckboxItem>
116+
Always Show Bookmarks Bar
117+
</MenubarCheckboxItem>
118+
<MenubarCheckboxItem checked>
119+
Always Show Full URLs
120+
</MenubarCheckboxItem>
121+
<MenubarSeparator />
122+
<MenubarItem inset>
123+
Reload <MenubarShortcut>⌘R</MenubarShortcut>
124+
</MenubarItem>
125+
<MenubarItem disabled inset>
126+
Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
127+
</MenubarItem>
128+
<MenubarSeparator />
129+
<MenubarItem inset>Toggle Fullscreen</MenubarItem>
130+
<MenubarSeparator />
131+
<MenubarItem inset>Hide Sidebar</MenubarItem>
132+
</MenubarContent>
133+
</MenubarMenu>
134+
<MenubarMenu>
135+
<MenubarTrigger>Profiles</MenubarTrigger>
136+
<MenubarContent>
137+
<MenubarRadioGroup value="benoit">
138+
<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
139+
<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
140+
<MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
141+
</MenubarRadioGroup>
142+
<MenubarSeparator />
143+
<MenubarItem inset>Edit...</MenubarItem>
144+
<MenubarSeparator />
145+
<MenubarItem inset>Add Profile...</MenubarItem>
146+
</MenubarContent>
147+
</MenubarMenu>
148+
</Menubar>
149+
</div>
150+
</div>
151+
152+
<h3 className="text-lg font-bold">Installation</h3>
153+
154+
<Separator />
155+
156+
<InstallationCommands
157+
packageUrl={`${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-menubar.json`}
158+
/>
159+
160+
<h3 className="text-lg font-bold mt-10">Usage</h3>
161+
162+
<Separator />
163+
164+
<CodeSnippet>{`import {
165+
Menubar,
166+
MenubarContent,
167+
MenubarItem,
168+
MenubarMenu,
169+
MenubarSeparator,
170+
MenubarShortcut,
171+
MenubarTrigger,
172+
} from "@/components/ui/8bit/menubar"`}</CodeSnippet>
173+
174+
<CodeSnippet>{`<Menubar>
175+
<MenubarMenu>
176+
<MenubarTrigger>File</MenubarTrigger>
177+
<MenubarContent>
178+
<MenubarItem>
179+
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
180+
</MenubarItem>
181+
<MenubarItem>New Window</MenubarItem>
182+
<MenubarSeparator />
183+
<MenubarItem>Share</MenubarItem>
184+
<MenubarSeparator />
185+
<MenubarItem>Print</MenubarItem>
186+
</MenubarContent>
187+
</MenubarMenu>
188+
</Menubar>`}</CodeSnippet>
189+
</div>
190+
)
191+
}

0 commit comments

Comments
 (0)