Skip to content

Commit 4a6048e

Browse files
RobinMalfaitRobinMalfait
committed
make examples between Vue and React consistent
1 parent f7d26b5 commit 4a6048e

File tree

11 files changed

+375
-666
lines changed

11 files changed

+375
-666
lines changed

‎packages/@headlessui-react/pages/_app.tsx‎

Lines changed: 1 addition & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from 'react'
22
import Link from 'next/link'
33
import Head from 'next/head'
4-
import { useRouter } from 'next/router'
54

65
import 'tailwindcss/tailwind.css'
7-
import { ExamplesType } from '../playground-utils/resolve-all-examples'
86
import { useDisposables } from '../src/hooks/use-disposables'
97
import { PropsOf } from '../src/types'
108

@@ -104,9 +102,6 @@ function KeyCaster() {
104102
}
105103

106104
function MyApp({ Component, pageProps }) {
107-
const router = useRouter()
108-
const { examples = [] } = pageProps
109-
110105
return (
111106
<>
112107
<Head>
@@ -138,72 +133,16 @@ function MyApp({ Component, pageProps }) {
138133
alt="Tailwind UI"
139134
/>
140135
</NextLink>
141-
{examples.length > 0 && (
142-
<div>
143-
<select
144-
value={router.asPath}
145-
onChange={event => {
146-
router.push(event.target.value)
147-
}}
148-
className="block w-full py-2 pl-3 pr-10 text-base leading-6 border-gray-300 form-select focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5"
149-
>
150-
<RecursiveExamplesSelectOptions examples={examples} />
151-
</select>
152-
</div>
153-
)}
154136
</header>
155137

156138
<KeyCaster />
157139

158-
<main className="flex-1 overflow-auto">
140+
<main className="flex-1 overflow-auto bg-gray-50">
159141
<Component {...pageProps} />
160142
</main>
161143
</div>
162144
</>
163145
)
164146
}
165147

166-
// Ideally you would use <optgroup></optgroup>... However, when you do that, React yells at you:
167-
// <optgroup> cannot appear as a child of <optgroup>
168-
function RecursiveExamplesSelectOptions(props: { examples: ExamplesType[]; level?: number }) {
169-
const { examples = [], level = 0 } = props
170-
171-
return (
172-
<>
173-
{examples.map(example => {
174-
if (example.children) {
175-
return (
176-
<React.Fragment key={example.name + example.path}>
177-
<option value={example.path}>
178-
{'   '.repeat(level)}
179-
{example.name
180-
.split(' ')
181-
.map(v => {
182-
const [first, ...rest] = v.split('')
183-
return `${first.toUpperCase()}${rest.join('')}`
184-
})
185-
.join(' ')}
186-
</option>
187-
<RecursiveExamplesSelectOptions level={level + 1} examples={example.children} />
188-
</React.Fragment>
189-
)
190-
}
191-
192-
return (
193-
<option key={example.path} value={example.path}>
194-
{'   '.repeat(level)}
195-
{example.name
196-
.split(' ')
197-
.map(v => {
198-
const [first, ...rest] = v.split('')
199-
return `${first.toUpperCase()}${rest.join('')}`
200-
})
201-
.join(' ')}
202-
</option>
203-
)
204-
})}
205-
</>
206-
)
207-
}
208-
209148
export default MyApp

‎packages/@headlessui-react/pages/menu/menu-with-framer-motion.tsx‎

Lines changed: 53 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react'
2-
import Head from 'next/head'
32
import Link from 'next/link'
43
import { AnimatePresence, motion } from 'framer-motion'
54
import { Menu } from '../../src/components/menu/menu'
@@ -9,74 +8,62 @@ import { PropsOf } from '../../src/types'
98

109
export default function Home() {
1110
return (
12-
<>
13-
<Head>
14-
<title>Menu with framer motion - Playground</title>
15-
</Head>
11+
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
12+
<div className="relative inline-block text-left">
13+
<Menu>
14+
{({ open }) => (
15+
<>
16+
<span className="rounded-md shadow-sm">
17+
<Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800">
18+
<span>Options</span>
19+
<svg className="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
20+
<path
21+
fillRule="evenodd"
22+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
23+
clipRule="evenodd"
24+
/>
25+
</svg>
26+
</Menu.Button>
27+
</span>
1628

17-
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
18-
<Dropdown />
19-
</div>
20-
</>
21-
)
22-
}
29+
<AnimatePresence>
30+
{open && (
31+
<Menu.Items
32+
static
33+
as={motion.div}
34+
initial={{ opacity: 0, y: 0 }}
35+
animate={{ opacity: 1, y: '0.5rem' }}
36+
exit={{ opacity: 0, y: 0 }}
37+
className="absolute right-0 w-56 bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none opacity-0"
38+
>
39+
<div className="px-4 py-3">
40+
<p className="text-sm leading-5">Signed in as</p>
41+
<p className="text-sm font-medium leading-5 text-gray-900 truncate">
42+
[email protected]
43+
</p>
44+
</div>
2345

24-
function Dropdown() {
25-
return (
26-
<div className="relative inline-block text-left">
27-
<Menu>
28-
{({ open }) => (
29-
<>
30-
<span className="rounded-md shadow-sm">
31-
<Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800">
32-
<span>Options</span>
33-
<svg className="w-5 h-5 ml-2 -mr-1" viewBox="0 0 20 20" fill="currentColor">
34-
<path
35-
fillRule="evenodd"
36-
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
37-
clipRule="evenodd"
38-
/>
39-
</svg>
40-
</Menu.Button>
41-
</span>
46+
<div className="py-1">
47+
<Item href="#account-settings">Account settings</Item>
48+
<Item as={NextLink} href="#support">
49+
Support
50+
</Item>
51+
<Item href="#new-feature" disabled>
52+
New feature (soon)
53+
</Item>
54+
<Item href="#license">License</Item>
55+
</div>
4256

43-
<AnimatePresence>
44-
{open && (
45-
<Menu.Items
46-
static
47-
as={motion.div}
48-
initial={{ opacity: 0, y: 0 }}
49-
animate={{ opacity: 1, y: '0.5rem' }}
50-
exit={{ opacity: 0, y: 0 }}
51-
className="absolute right-0 w-56 bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none opacity-0"
52-
>
53-
<div className="px-4 py-3">
54-
<p className="text-sm leading-5">Signed in as</p>
55-
<p className="text-sm font-medium leading-5 text-gray-900 truncate">
56-
[email protected]
57-
</p>
58-
</div>
59-
60-
<div className="py-1">
61-
<Item href="#account-settings">Account settings</Item>
62-
<Item as={NextLink} href="#support">
63-
Support
64-
</Item>
65-
<Item href="#new-feature" disabled>
66-
New feature (soon)
67-
</Item>
68-
<Item href="#license">License</Item>
69-
</div>
70-
71-
<div className="py-1">
72-
<Item as={SignOutButton} />
73-
</div>
74-
</Menu.Items>
75-
)}
76-
</AnimatePresence>
77-
</>
78-
)}
79-
</Menu>
57+
<div className="py-1">
58+
<Item as={SignOutButton} />
59+
</div>
60+
</Menu.Items>
61+
)}
62+
</AnimatePresence>
63+
</>
64+
)}
65+
</Menu>
66+
</div>
8067
</div>
8168
)
8269
}

0 commit comments

Comments
 (0)