|
1 | | -"use client"; |
2 | | -import { useState } from "react"; |
3 | | -import { HamburgerMenuIcon, DotFilledIcon, CheckIcon, ChevronRightIcon } from "@radix-ui/react-icons"; |
4 | | -import * as DropdownMenu from "@radix-ui/react-dropdown-menu"; |
5 | | - |
6 | | -function RightSlot({ children }) { |
7 | | - return ( |
8 | | - <div className="ml-auto pl-4 text-gray-500 group-hover:text-gray-200"> |
9 | | - {children} |
10 | | - </div> |
11 | | - ); |
12 | | -} |
13 | | - |
14 | | -function DropdownMenuItem({ children, ...props }) { |
15 | | - return ( |
16 | | - <DropdownMenu.Item |
17 | | - {...props} |
18 | | - className={"group bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none" |
19 | | - + (props.disabled ? " text-gray-500" : "")} |
20 | | - > |
21 | | - {children} |
22 | | - </DropdownMenu.Item> |
23 | | - ); |
24 | | -} |
25 | | - |
26 | | -function DropdownMenuCheckboxItem({ children, ...props }) { |
27 | | - return ( |
28 | | - <DropdownMenu.CheckboxItem |
29 | | - {...props} |
30 | | - className="group bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none" |
31 | | - > |
32 | | - {children} |
33 | | - </DropdownMenu.CheckboxItem> |
34 | | - ); |
35 | | -} |
36 | | - |
37 | | -function DropdownMenuItemIndicator({ children, ...props }) { |
38 | | - return ( |
39 | | - <DropdownMenu.ItemIndicator |
40 | | - {...props} |
41 | | - className="absolute left-0 w-6 inline-flex items-center justify-center" |
42 | | - > |
43 | | - {children} |
44 | | - </DropdownMenu.ItemIndicator> |
45 | | - ); |
46 | | -} |
47 | | - |
48 | | -function Separator() { |
49 | | - return <DropdownMenu.Separator className="h-[1px] bg-gray-300 m-1" />; |
50 | | -} |
51 | | - |
52 | | -function DropdownMenuRadioItem({ |
53 | | - children, |
54 | | - ...props |
55 | | -}: { |
56 | | - children: React.ReactNode; |
57 | | - value: string; |
58 | | -}) { |
59 | | - return ( |
60 | | - <DropdownMenu.RadioItem |
61 | | - {...props} |
62 | | - className="bg-white hover:bg-gray-700 hover:text-gray-200 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none" |
63 | | - > |
64 | | - {children} |
65 | | - </DropdownMenu.RadioItem> |
66 | | - ); |
67 | | -} |
| 1 | +import HelloWorld from "./_component/hello-world"; |
68 | 2 |
|
69 | 3 | export default function Home() { |
70 | | - const [bookmarksChecked, setBookmarksChecked] = useState(true); |
71 | | - const [urlsChecked, setUrlsChecked] = useState(false); |
72 | | - const [person, setPerson] = useState("pedro"); |
73 | 4 | return ( |
74 | | - <div className="h-screen w-full flex flex-col space-y-4 items-center justify-center bg-gradient-to-r from-cyan-500 to-blue-500"> |
75 | | - <h1 className="text-6xl text-white font-semibold"> |
76 | | - Radix UI + Tailwind CSS |
77 | | - </h1> |
78 | | - <h1 className="text-4xl text-white font-semibold">Click me!</h1> |
79 | | - |
80 | | - <DropdownMenu.Root> |
81 | | - <DropdownMenu.Trigger |
82 | | - asChild |
83 | | - className="bg-white text-xs rounded-3xl flex items-center h-8 px-2 relative select-none" |
84 | | - > |
85 | | - <button |
86 | | - type="button" |
87 | | - aria-label="Customize options" |
88 | | - className="h-8 w-8 inline-flex items-center justify-center shadow-lg" |
89 | | - > |
90 | | - <HamburgerMenuIcon /> |
91 | | - </button> |
92 | | - </DropdownMenu.Trigger> |
93 | | - |
94 | | - <DropdownMenu.Content |
95 | | - sideOffset={5} |
96 | | - className="bg-white rounded p-1 shadow-lg" |
97 | | - > |
98 | | - <DropdownMenuItem> |
99 | | - New Tab <RightSlot>⌘+T</RightSlot> |
100 | | - </DropdownMenuItem> |
101 | | - <DropdownMenuItem> |
102 | | - New Window <RightSlot>⌘+N</RightSlot> |
103 | | - </DropdownMenuItem> |
104 | | - <DropdownMenuItem disabled> |
105 | | - New Private Window <RightSlot>⇧+⌘+N</RightSlot> |
106 | | - </DropdownMenuItem> |
107 | | - <DropdownMenu.Sub> |
108 | | - <DropdownMenu.SubTrigger className="group bg-white hover:bg-gray-700 hover:text-gray-200 hover:border-0 text-xs rounded flex items-center h-6 px-1 pl-6 relative select-none"> |
109 | | - More Tools |
110 | | - <RightSlot> |
111 | | - <ChevronRightIcon /> |
112 | | - </RightSlot> |
113 | | - </DropdownMenu.SubTrigger> |
114 | | - <DropdownMenu.SubContent |
115 | | - sideOffset={2} |
116 | | - alignOffset={-5} |
117 | | - className="bg-white rounded p-1 shadow-lg" |
118 | | - > |
119 | | - <DropdownMenuItem> |
120 | | - Save Page As… <RightSlot>⌘+S</RightSlot> |
121 | | - </DropdownMenuItem> |
122 | | - <DropdownMenuItem>Create Shortcut…</DropdownMenuItem> |
123 | | - <DropdownMenuItem>Name Window…</DropdownMenuItem> |
124 | | - <Separator /> |
125 | | - <DropdownMenuItem>Developer Tools</DropdownMenuItem> |
126 | | - </DropdownMenu.SubContent> |
127 | | - </DropdownMenu.Sub> |
128 | | - <Separator /> |
129 | | - <DropdownMenuCheckboxItem |
130 | | - checked={bookmarksChecked} |
131 | | - onCheckedChange={setBookmarksChecked} |
132 | | - > |
133 | | - <DropdownMenuItemIndicator> |
134 | | - <CheckIcon /> |
135 | | - </DropdownMenuItemIndicator> |
136 | | - Show Bookmarks <RightSlot>⌘+B</RightSlot> |
137 | | - </DropdownMenuCheckboxItem> |
138 | | - <DropdownMenuCheckboxItem |
139 | | - checked={urlsChecked} |
140 | | - onCheckedChange={setUrlsChecked} |
141 | | - > |
142 | | - <DropdownMenuItemIndicator> |
143 | | - <CheckIcon /> |
144 | | - </DropdownMenuItemIndicator> |
145 | | - Show Full URLs |
146 | | - </DropdownMenuCheckboxItem> |
147 | | - <Separator /> |
148 | | - <DropdownMenu.Label className="pl-6 leading-6 text-xs text-gray-700"> |
149 | | - Contributors |
150 | | - </DropdownMenu.Label> |
151 | | - |
152 | | - <DropdownMenu.RadioGroup value={person} onValueChange={setPerson}> |
153 | | - <DropdownMenuRadioItem value="pedro"> |
154 | | - <DropdownMenuItemIndicator> |
155 | | - <DotFilledIcon /> |
156 | | - </DropdownMenuItemIndicator> |
157 | | - Pedro Sanchez |
158 | | - </DropdownMenuRadioItem> |
159 | | - <DropdownMenuRadioItem value="pablo"> |
160 | | - <DropdownMenuItemIndicator> |
161 | | - <DotFilledIcon /> |
162 | | - </DropdownMenuItemIndicator> |
163 | | - Pablo Sanchez |
164 | | - </DropdownMenuRadioItem> |
165 | | - </DropdownMenu.RadioGroup> |
166 | | - </DropdownMenu.Content> |
167 | | - </DropdownMenu.Root> |
| 5 | + <div className="example"> |
| 6 | + <HelloWorld /> |
168 | 7 | </div> |
169 | 8 | ); |
170 | 9 | } |
0 commit comments