chore(examples): add Radix UI example (#41169)
fixes #40072 ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>
This commit is contained in:
Pedro Sanchez
GitHub
parent
d5837e03cc
commit
6e171696f8
9 changed files with 301 additions and 0 deletions
34
examples/radix-ui/.gitignore
vendored
Normal file
34
examples/radix-ui/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
# Dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# Testing
|
||||
/coverage
|
||||
|
||||
# Next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# Production
|
||||
/build
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# Debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Local env files
|
||||
.env*.local
|
||||
|
||||
# Vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
27
examples/radix-ui/README.md
Normal file
27
examples/radix-ui/README.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
# Radix UI Example
|
||||
|
||||
This example showcases a few basic Radix UI components
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
|
||||
|
||||
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/radix-ui&project-name=radix-ui&repository-name=radix-ui)
|
||||
|
||||
## How to use
|
||||
|
||||
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example radix-ui radix-ui-app
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn create next-app --example radix-ui radix-ui-app
|
||||
```
|
||||
|
||||
```bash
|
||||
pnpm create next-app --example radix-ui radix-ui-app
|
||||
```
|
||||
|
||||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
|
||||
23
examples/radix-ui/package.json
Normal file
23
examples/radix-ui/package.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dropdown-menu": "1.0.0",
|
||||
"@radix-ui/react-icons": "1.1.1",
|
||||
"next": "latest",
|
||||
"react": "latest",
|
||||
"react-dom": "latest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.8.0",
|
||||
"@types/react": "18.0.21",
|
||||
"autoprefixer": "10.4.12",
|
||||
"postcss": "8.4.17",
|
||||
"tailwindcss": "3.1.8",
|
||||
"typescript": "4.8.4"
|
||||
}
|
||||
}
|
||||
5
examples/radix-ui/pages/_app.tsx
Normal file
5
examples/radix-ui/pages/_app.tsx
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import '../styles/globals.css'
|
||||
|
||||
export default function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
175
examples/radix-ui/pages/index.tsx
Normal file
175
examples/radix-ui/pages/index.tsx
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
import { useState } from 'react'
|
||||
import {
|
||||
HamburgerMenuIcon,
|
||||
DotFilledIcon,
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
} from '@radix-ui/react-icons'
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
function RightSlot({ children }) {
|
||||
return (
|
||||
<div className="ml-auto pl-4 text-gray-500 group-hover:text-gray-200">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({ children, ...props }) {
|
||||
return (
|
||||
<DropdownMenu.Item
|
||||
{...props}
|
||||
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' +
|
||||
(props.disabled ? ' text-gray-500' : '')
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</DropdownMenu.Item>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({ children, ...props }) {
|
||||
return (
|
||||
<DropdownMenu.CheckboxItem
|
||||
{...props}
|
||||
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"
|
||||
>
|
||||
{children}
|
||||
</DropdownMenu.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItemIndicator({ children, ...props }) {
|
||||
return (
|
||||
<DropdownMenu.ItemIndicator
|
||||
{...props}
|
||||
className="absolute left-0 w-6 inline-flex items-center justify-center"
|
||||
>
|
||||
{children}
|
||||
</DropdownMenu.ItemIndicator>
|
||||
)
|
||||
}
|
||||
|
||||
function Separator() {
|
||||
return <DropdownMenu.Separator className="h-[1px] bg-gray-300 m-1" />
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
children,
|
||||
...props
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenu.RadioItem
|
||||
{...props}
|
||||
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"
|
||||
>
|
||||
{children}
|
||||
</DropdownMenu.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [bookmarksChecked, setBookmarksChecked] = useState(true)
|
||||
const [urlsChecked, setUrlsChecked] = useState(false)
|
||||
const [person, setPerson] = useState('pedro')
|
||||
return (
|
||||
<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">
|
||||
<h1 className="text-6xl text-white font-semibold">
|
||||
Radix UI + Tailwind CSS
|
||||
</h1>
|
||||
<h1 className="text-4xl text-white font-semibold">Click me!</h1>
|
||||
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger
|
||||
asChild
|
||||
className="bg-white text-xs rounded-3xl flex items-center h-8 px-2 relative select-none"
|
||||
>
|
||||
<button
|
||||
aria-label="Customise options"
|
||||
className="h-8 w-8 inline-flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<HamburgerMenuIcon />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenu.Content
|
||||
sideOffset={5}
|
||||
className="bg-white rounded p-1 shadow-lg"
|
||||
>
|
||||
<DropdownMenuItem>
|
||||
New Tab <RightSlot>⌘+T</RightSlot>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
New Window <RightSlot>⌘+N</RightSlot>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled>
|
||||
New Private Window <RightSlot>⇧+⌘+N</RightSlot>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenu.Sub>
|
||||
<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">
|
||||
More Tools
|
||||
<RightSlot>
|
||||
<ChevronRightIcon />
|
||||
</RightSlot>
|
||||
</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent
|
||||
sideOffset={2}
|
||||
alignOffset={-5}
|
||||
className="bg-white rounded p-1 shadow-lg"
|
||||
>
|
||||
<DropdownMenuItem>
|
||||
Save Page As… <RightSlot>⌘+S</RightSlot>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
|
||||
<DropdownMenuItem>Name Window…</DropdownMenuItem>
|
||||
<Separator />
|
||||
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
<Separator />
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={bookmarksChecked}
|
||||
onCheckedChange={setBookmarksChecked}
|
||||
>
|
||||
<DropdownMenuItemIndicator>
|
||||
<CheckIcon />
|
||||
</DropdownMenuItemIndicator>
|
||||
Show Bookmarks <RightSlot>⌘+B</RightSlot>
|
||||
</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={urlsChecked}
|
||||
onCheckedChange={setUrlsChecked}
|
||||
>
|
||||
<DropdownMenuItemIndicator>
|
||||
<CheckIcon />
|
||||
</DropdownMenuItemIndicator>
|
||||
Show Full URLs
|
||||
</DropdownMenuCheckboxItem>
|
||||
<Separator />
|
||||
<DropdownMenu.Label className="pl-6 leading-6 text-xs text-gray-700">
|
||||
Contributors
|
||||
</DropdownMenu.Label>
|
||||
|
||||
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
|
||||
<DropdownMenuRadioItem value="pedro">
|
||||
<DropdownMenuItemIndicator>
|
||||
<DotFilledIcon />
|
||||
</DropdownMenuItemIndicator>
|
||||
Pedro Sanchez
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="pablo">
|
||||
<DropdownMenuItemIndicator>
|
||||
<DotFilledIcon />
|
||||
</DropdownMenuItemIndicator>
|
||||
Pablo Sanchez
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenu.RadioGroup>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
6
examples/radix-ui/postcss.config.js
Normal file
6
examples/radix-ui/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
3
examples/radix-ui/styles/globals.css
Normal file
3
examples/radix-ui/styles/globals.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
8
examples/radix-ui/tailwind.config.js
Normal file
8
examples/radix-ui/tailwind.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./pages/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
20
examples/radix-ui/tsconfig.json
Normal file
20
examples/radix-ui/tsconfig.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in a new issue