Skip to content

Commit 825a22a

Browse files
Rel1cxRel1cx
committed
docs: improve examples and add an 'next-app' example
1 parent c7951f2 commit 825a22a

30 files changed

+1125
-396
lines changed

‎examples/next-app/.gitignore

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎examples/next-app/app/layout.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import "../styles/globals.css";
2+
3+
export default function RootLayout({
4+
children,
5+
}: {
6+
children: React.ReactNode;
7+
}) {
8+
return (
9+
<html lang="en">
10+
<body>{children}</body>
11+
</html>
12+
);
13+
}

‎examples/next-app/app/page.tsx

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
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+
}
68+
69+
export default function Home() {
70+
const [bookmarksChecked, setBookmarksChecked] = useState(true);
71+
const [urlsChecked, setUrlsChecked] = useState(false);
72+
const [person, setPerson] = useState("pedro");
73+
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+
aria-label="Customise options"
87+
className="h-8 w-8 inline-flex items-center justify-center shadow-lg"
88+
>
89+
<HamburgerMenuIcon />
90+
</button>
91+
</DropdownMenu.Trigger>
92+
93+
<DropdownMenu.Content
94+
sideOffset={5}
95+
className="bg-white rounded p-1 shadow-lg"
96+
>
97+
<DropdownMenuItem>
98+
New Tab <RightSlot>⌘+T</RightSlot>
99+
</DropdownMenuItem>
100+
<DropdownMenuItem>
101+
New Window <RightSlot>⌘+N</RightSlot>
102+
</DropdownMenuItem>
103+
<DropdownMenuItem disabled>
104+
New Private Window <RightSlot>⇧+⌘+N</RightSlot>
105+
</DropdownMenuItem>
106+
<DropdownMenu.Sub>
107+
<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">
108+
More Tools
109+
<RightSlot>
110+
<ChevronRightIcon />
111+
</RightSlot>
112+
</DropdownMenu.SubTrigger>
113+
<DropdownMenu.SubContent
114+
sideOffset={2}
115+
alignOffset={-5}
116+
className="bg-white rounded p-1 shadow-lg"
117+
>
118+
<DropdownMenuItem>
119+
Save Page As… <RightSlot>⌘+S</RightSlot>
120+
</DropdownMenuItem>
121+
<DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
122+
<DropdownMenuItem>Name Window…</DropdownMenuItem>
123+
<Separator />
124+
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
125+
</DropdownMenu.SubContent>
126+
</DropdownMenu.Sub>
127+
<Separator />
128+
<DropdownMenuCheckboxItem
129+
checked={bookmarksChecked}
130+
onCheckedChange={setBookmarksChecked}
131+
>
132+
<DropdownMenuItemIndicator>
133+
<CheckIcon />
134+
</DropdownMenuItemIndicator>
135+
Show Bookmarks <RightSlot>⌘+B</RightSlot>
136+
</DropdownMenuCheckboxItem>
137+
<DropdownMenuCheckboxItem
138+
checked={urlsChecked}
139+
onCheckedChange={setUrlsChecked}
140+
>
141+
<DropdownMenuItemIndicator>
142+
<CheckIcon />
143+
</DropdownMenuItemIndicator>
144+
Show Full URLs
145+
</DropdownMenuCheckboxItem>
146+
<Separator />
147+
<DropdownMenu.Label className="pl-6 leading-6 text-xs text-gray-700">
148+
Contributors
149+
</DropdownMenu.Label>
150+
151+
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
152+
<DropdownMenuRadioItem value="pedro">
153+
<DropdownMenuItemIndicator>
154+
<DotFilledIcon />
155+
</DropdownMenuItemIndicator>
156+
Pedro Sanchez
157+
</DropdownMenuRadioItem>
158+
<DropdownMenuRadioItem value="pablo">
159+
<DropdownMenuItemIndicator>
160+
<DotFilledIcon />
161+
</DropdownMenuItemIndicator>
162+
Pablo Sanchez
163+
</DropdownMenuRadioItem>
164+
</DropdownMenu.RadioGroup>
165+
</DropdownMenu.Content>
166+
</DropdownMenu.Root>
167+
</div>
168+
);
169+
}

‎examples/next-app/eslint.config.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
declare module "@eslint/js";
2+
declare module "eslint-plugin-react-hooks";

‎examples/next-app/eslint.config.mjs

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import js from "@eslint/js";
2+
import tseslint from "typescript-eslint";
3+
import next from "@next/eslint-plugin-next";
4+
import react from "@eslint-react/eslint-plugin";
5+
import reactHooks from "eslint-plugin-react-hooks";
6+
import gitignore from "eslint-config-flat-gitignore";
7+
8+
export default tseslint.config(
9+
js.configs.recommended,
10+
...tseslint.configs.recommendedTypeChecked,
11+
{
12+
languageOptions: {
13+
parserOptions: {
14+
project: "./tsconfig.json",
15+
tsconfigRootDir: import.meta.dirname,
16+
},
17+
},
18+
rules: {
19+
"no-undef": "off",
20+
},
21+
},
22+
{
23+
files: ["**/*.{ts,tsx}"],
24+
...react.configs.recommended,
25+
},
26+
{
27+
files: ["**/*.{ts,tsx}"],
28+
plugins: {
29+
"react-hooks": reactHooks,
30+
},
31+
rules: reactHooks.configs.recommended.rules,
32+
},
33+
{
34+
files: ["**/*.{ts,tsx}"],
35+
plugins: {
36+
"@next/next": next,
37+
},
38+
rules: {
39+
...next.configs.recommended.rules,
40+
...next.configs["core-web-vitals"].rules,
41+
},
42+
},
43+
{
44+
files: ["app/**/*.{js,ts,jsx,tsx}"],
45+
rules: {
46+
"@typescript-eslint/require-await": "off",
47+
},
48+
},
49+
{
50+
files: ["*.js", "*.cjs"],
51+
...tseslint.configs.disableTypeChecked,
52+
},
53+
{
54+
files: ["*.js", "*.cjs"],
55+
rules: {
56+
"@typescript-eslint/no-require-imports": "off",
57+
},
58+
},
59+
gitignore(),
60+
{
61+
ignores: ["*.config.mjs"],
62+
},
63+
);

‎examples/next-app/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "next-app",
3+
"private": true,
4+
"scripts": {
5+
"dev": "next dev",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"@radix-ui/react-dropdown-menu": "2.1.1",
11+
"@radix-ui/react-icons": "1.3.0",
12+
"next": "latest",
13+
"react": "latest",
14+
"react-dom": "latest"
15+
},
16+
"devDependencies": {
17+
"autoprefixer": "10.4.20",
18+
"postcss": "8.4.41",
19+
"tailwindcss": "3.4.9",
20+
"@eslint-react/eslint-plugin": "workspace:*",
21+
"@eslint/config-inspector": "^0.6.0",
22+
"@eslint/js": "^9.17.0",
23+
"eslint": "^9.17.0",
24+
"eslint-plugin-react-hooks": "^5.1.0",
25+
"eslint-plugin-react-refresh": "^0.4.16",
26+
"typescript-eslint": "^8.18.0",
27+
"@next/eslint-plugin-next": "^15.1.0",
28+
"@types/negotiator": "^0.6.3",
29+
"@types/node": "^22.10.2",
30+
"@types/react": "^19.0.1",
31+
"@types/react-dom": "^19.0.2",
32+
"typescript": "^5.7.2"
33+
}
34+
}

‎examples/next-app/postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎examples/next-app/styles/globals.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎examples/next-app/tailwind.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ["./app/**/*.{js,ts,jsx,tsx}"],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
};

‎examples/next-app/tsconfig.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"incremental": true,
11+
"esModuleInterop": true,
12+
"module": "esnext",
13+
"moduleResolution": "node",
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"jsx": "preserve"
17+
},
18+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19+
"exclude": ["node_modules"]
20+
}

0 commit comments

Comments
 (0)