Skip to content

Commit fd6a93d

Browse files
cody-dot-jscody-dot-js
committed
adds export + docs site entry for DropdownMenu
1 parent 2cdde14 commit fd6a93d

File tree

4 files changed

+183
-0
lines changed

4 files changed

+183
-0
lines changed

‎app/components/layout.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ const components = [
101101
"Button",
102102
"Card",
103103
"Code Block",
104+
"Dropdown Menu",
104105
"Inline Code",
105106
"Input",
106107
"Media Object",
@@ -121,6 +122,7 @@ const componentRouteLookup = {
121122
Button: "/components/button",
122123
Card: "/components/card",
123124
"Code Block": "/components/code-block",
125+
"Dropdown Menu": "/components/dropdown-menu",
124126
"Inline Code": "/components/inline-code",
125127
Input: "/components/input",
126128
"Media Object": "/components/media-object",

‎app/routes/components.dropdown-menu.tsx

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import { Button } from "@/button";
2+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3+
import {
4+
DropdownMenu,
5+
DropdownMenuContent,
6+
DropdownMenuGroup,
7+
DropdownMenuItem,
8+
DropdownMenuLabel,
9+
DropdownMenuPortal,
10+
DropdownMenuSeparator,
11+
DropdownMenuShortcut,
12+
DropdownMenuSub,
13+
DropdownMenuSubContent,
14+
DropdownMenuSubTrigger,
15+
DropdownMenuTrigger,
16+
} from "@/dropdown-menu";
17+
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
18+
import { Example } from "~/components/example";
19+
20+
export const meta: MetaFunction = () => {
21+
return [
22+
{ title: "@ngrok/mantle — DropdownMenu" },
23+
{ name: "description", content: "mantle is ngrok's UI library and design system" },
24+
];
25+
};
26+
27+
export const headers: HeadersFunction = () => {
28+
return {
29+
"Cache-Control": "max-age=300, stale-while-revalidate=604800",
30+
};
31+
};
32+
33+
export default function Page() {
34+
return (
35+
<div>
36+
<h1 className="text-5xl font-medium">Dropdown Menu</h1>
37+
<p className="mt-4 text-xl text-gray-600">
38+
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
39+
</p>
40+
41+
<Example className="mt-4">
42+
<DropdownMenu modal>
43+
<DropdownMenuTrigger asChild>
44+
<Button appearance="outline">Open</Button>
45+
</DropdownMenuTrigger>
46+
<DropdownMenuContent className="w-56">
47+
<DropdownMenuLabel>My Account</DropdownMenuLabel>
48+
<DropdownMenuSeparator />
49+
<DropdownMenuGroup>
50+
<DropdownMenuItem>
51+
Profile
52+
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
53+
</DropdownMenuItem>
54+
<DropdownMenuItem>
55+
Billing
56+
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
57+
</DropdownMenuItem>
58+
<DropdownMenuItem>
59+
Settings
60+
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
61+
</DropdownMenuItem>
62+
<DropdownMenuItem>
63+
Keyboard shortcuts
64+
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
65+
</DropdownMenuItem>
66+
</DropdownMenuGroup>
67+
<DropdownMenuSeparator />
68+
<DropdownMenuGroup>
69+
<DropdownMenuItem>Team</DropdownMenuItem>
70+
<DropdownMenuSub>
71+
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
72+
<DropdownMenuPortal>
73+
<DropdownMenuSubContent>
74+
<DropdownMenuItem>Email</DropdownMenuItem>
75+
<DropdownMenuItem>Message</DropdownMenuItem>
76+
<DropdownMenuSeparator />
77+
<DropdownMenuItem>More...</DropdownMenuItem>
78+
</DropdownMenuSubContent>
79+
</DropdownMenuPortal>
80+
</DropdownMenuSub>
81+
<DropdownMenuItem>
82+
New Team
83+
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
84+
</DropdownMenuItem>
85+
</DropdownMenuGroup>
86+
<DropdownMenuSeparator />
87+
<DropdownMenuItem>GitHub</DropdownMenuItem>
88+
<DropdownMenuItem>Support</DropdownMenuItem>
89+
<DropdownMenuItem disabled>API</DropdownMenuItem>
90+
<DropdownMenuSeparator />
91+
<DropdownMenuItem>
92+
Log out
93+
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
94+
</DropdownMenuItem>
95+
</DropdownMenuContent>
96+
</DropdownMenu>
97+
</Example>
98+
<CodeBlock className="rounded-b-lg rounded-t-none">
99+
<CodeBlockBody>
100+
<CodeBlockCopyButton />
101+
<CodeBlockCode language="tsx">{code`
102+
import {
103+
Button,
104+
DropdownMenu,
105+
DropdownMenuContent,
106+
DropdownMenuGroup,
107+
DropdownMenuItem,
108+
DropdownMenuLabel,
109+
DropdownMenuPortal,
110+
DropdownMenuSeparator,
111+
DropdownMenuShortcut,
112+
DropdownMenuSub,
113+
DropdownMenuSubContent,
114+
DropdownMenuSubTrigger,
115+
DropdownMenuTrigger,
116+
} from "@ngrok/mantle";
117+
118+
<DropdownMenu>
119+
<DropdownMenuTrigger asChild>
120+
<Button appearance="outline">Open</Button>
121+
</DropdownMenuTrigger>
122+
<DropdownMenuContent className="w-56">
123+
<DropdownMenuLabel>My Account</DropdownMenuLabel>
124+
<DropdownMenuSeparator />
125+
<DropdownMenuGroup>
126+
<DropdownMenuItem>
127+
Profile
128+
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
129+
</DropdownMenuItem>
130+
<DropdownMenuItem>
131+
Billing
132+
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
133+
</DropdownMenuItem>
134+
<DropdownMenuItem>
135+
Settings
136+
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
137+
</DropdownMenuItem>
138+
<DropdownMenuItem>
139+
Keyboard shortcuts
140+
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
141+
</DropdownMenuItem>
142+
</DropdownMenuGroup>
143+
<DropdownMenuSeparator />
144+
<DropdownMenuGroup>
145+
<DropdownMenuItem>Team</DropdownMenuItem>
146+
<DropdownMenuSub>
147+
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
148+
<DropdownMenuPortal>
149+
<DropdownMenuSubContent>
150+
<DropdownMenuItem>Email</DropdownMenuItem>
151+
<DropdownMenuItem>Message</DropdownMenuItem>
152+
<DropdownMenuSeparator />
153+
<DropdownMenuItem>More...</DropdownMenuItem>
154+
</DropdownMenuSubContent>
155+
</DropdownMenuPortal>
156+
</DropdownMenuSub>
157+
<DropdownMenuItem>
158+
New Team
159+
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
160+
</DropdownMenuItem>
161+
</DropdownMenuGroup>
162+
<DropdownMenuSeparator />
163+
<DropdownMenuItem>GitHub</DropdownMenuItem>
164+
<DropdownMenuItem>Support</DropdownMenuItem>
165+
<DropdownMenuItem disabled>API</DropdownMenuItem>
166+
<DropdownMenuSeparator />
167+
<DropdownMenuItem>
168+
Log out
169+
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
170+
</DropdownMenuItem>
171+
</DropdownMenuContent>
172+
</DropdownMenu>
173+
`}</CodeBlockCode>
174+
</CodeBlockBody>
175+
</CodeBlock>
176+
</div>
177+
);
178+
}

‎app/types/routes.ts

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const routePatterns = [
99
"/components/button",
1010
"/components/card",
1111
"/components/code-block",
12+
"/components/dropdown-menu",
1213
"/components/inline-code",
1314
"/components/input",
1415
"/components/media-object",
@@ -39,6 +40,7 @@ export const routes = [
3940
"/components/button",
4041
"/components/card",
4142
"/components/code-block",
43+
"/components/dropdown-menu",
4244
"/components/inline-code",
4345
"/components/input",
4446
"/components/media-object",

‎components/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export * from "./button";
44
export * from "./card";
55
export * from "./code-block";
66
export * from "./core";
7+
export * from "./dropdown-menu";
78
export * from "./inline-code";
89
export * from "./input";
910
export * from "./media-object";

0 commit comments

Comments
 (0)