Robin Malfait
a73007388f
* bump Next in playground * convert legacy Link after Next.js bump * update yarn.lock * switch to npm workspaces * move `packages/playground-*` to `playgrounds/*` * use `npm` instead of `yarn` * sync package-lock.json * use node 20 for insiders releases
239 lines
11 KiB
TypeScript
239 lines
11 KiB
TypeScript
import { Dialog, Menu, Portal, Transition } from '@headlessui/react'
|
|
import { Fragment, useState } from 'react'
|
|
import Flatpickr from 'react-flatpickr'
|
|
import { Button } from '../../components/button'
|
|
import { classNames } from '../../utils/class-names'
|
|
import { usePopper } from '../../utils/hooks/use-popper'
|
|
|
|
import 'flatpickr/dist/themes/light.css'
|
|
|
|
function resolveClass({ active, disabled }) {
|
|
return classNames(
|
|
'flex justify-between w-full px-4 py-2 text-sm leading-5 text-left',
|
|
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
|
|
disabled && 'cursor-not-allowed opacity-50'
|
|
)
|
|
}
|
|
|
|
function Nested({ onClose, level = 0 }) {
|
|
let [showChild, setShowChild] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={true} onClose={onClose} className="fixed inset-0 z-10">
|
|
<Dialog.Overlay className="fixed inset-0 bg-gray-500 opacity-25" />
|
|
<div
|
|
className="fixed left-12 top-24 z-10 w-96 bg-white p-4"
|
|
style={{
|
|
transform: `translate(calc(50px * ${level}), calc(50px * ${level}))`,
|
|
}}
|
|
>
|
|
<p>Level: {level}</p>
|
|
<div className="flex gap-4">
|
|
<Button onClick={() => setShowChild(true)}>Open (1)</Button>
|
|
<Button onClick={() => setShowChild(true)}>Open (2)</Button>
|
|
<Button onClick={() => setShowChild(true)}>Open (3)</Button>
|
|
</div>
|
|
</div>
|
|
{showChild && <Nested onClose={() => setShowChild(false)} level={level + 1} />}
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function Home() {
|
|
let [isOpen, setIsOpen] = useState(false)
|
|
let [nested, setNested] = useState(false)
|
|
|
|
let [trigger, container] = usePopper({
|
|
placement: 'bottom-end',
|
|
strategy: 'fixed',
|
|
modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
|
|
})
|
|
|
|
let [date, setDate] = useState(new Date())
|
|
|
|
return (
|
|
<>
|
|
<div className="flex gap-4 p-12">
|
|
<Button onClick={() => setIsOpen((v) => !v)}>Toggle!</Button>
|
|
<Button onClick={() => setNested(true)}>Show nested</Button>
|
|
</div>
|
|
{nested && <Nested onClose={() => setNested(false)} />}
|
|
|
|
<Transition
|
|
data-debug="Dialog"
|
|
show={isOpen}
|
|
as={Fragment}
|
|
beforeEnter={() => console.log('[Transition] Before enter')}
|
|
afterEnter={() => console.log('[Transition] After enter')}
|
|
beforeLeave={() => console.log('[Transition] Before leave')}
|
|
afterLeave={() => console.log('[Transition] After leave')}
|
|
>
|
|
<Dialog
|
|
onClose={() => {
|
|
console.log('close')
|
|
setIsOpen(false)
|
|
}}
|
|
>
|
|
<div className="fixed inset-0 z-10 overflow-y-auto">
|
|
<div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-75"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-75"
|
|
leaveTo="opacity-0"
|
|
entered="opacity-75"
|
|
beforeEnter={() => console.log('[Transition.Child] [Overlay] Before enter')}
|
|
afterEnter={() => console.log('[Transition.Child] [Overlay] After enter')}
|
|
beforeLeave={() => console.log('[Transition.Child] [Overlay] Before leave')}
|
|
afterLeave={() => console.log('[Transition.Child] [Overlay] After leave')}
|
|
>
|
|
<div className="fixed inset-0 bg-gray-500 transition-opacity" />
|
|
</Transition.Child>
|
|
|
|
<Transition.Child
|
|
enter="ease-out transform duration-300"
|
|
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
|
leave="ease-in transform duration-200"
|
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
beforeEnter={() => console.log('[Transition.Child] [Panel] Before enter')}
|
|
afterEnter={() => console.log('[Transition.Child] [Panel] After enter')}
|
|
beforeLeave={() => console.log('[Transition.Child] [Panel] Before leave')}
|
|
afterLeave={() => console.log('[Transition.Child] [Panel] After leave')}
|
|
>
|
|
{/* This element is to trick the browser into centering the modal contents. */}
|
|
<span
|
|
className="hidden sm:inline-block sm:h-screen sm:align-middle"
|
|
aria-hidden="true"
|
|
>
|
|
​
|
|
</span>
|
|
<Dialog.Panel className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle">
|
|
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
|
<div className="sm:flex sm:items-start">
|
|
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
|
{/* Heroicon name: exclamation */}
|
|
<svg
|
|
className="h-6 w-6 text-red-600"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
|
<Dialog.Title
|
|
as="h3"
|
|
className="text-lg font-medium leading-6 text-gray-900"
|
|
>
|
|
Deactivate account
|
|
</Dialog.Title>
|
|
<div className="mt-2">
|
|
<p className="text-sm text-gray-500">
|
|
Are you sure you want to deactivate your account? All of your data will
|
|
be permanently removed. This action cannot be undone.
|
|
</p>
|
|
<div className="relative mt-10 inline-flex gap-4 text-left">
|
|
<Menu>
|
|
<Menu.Button as={Button} ref={trigger}>
|
|
<span>Choose a reason</span>
|
|
<svg
|
|
className="-mr-1 ml-2 h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
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"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</Menu.Button>
|
|
|
|
<Transition
|
|
enter="transition duration-300 ease-out"
|
|
enterFrom="transform scale-95 opacity-0"
|
|
enterTo="transform scale-100 opacity-100"
|
|
leave="transition duration-75 ease-out"
|
|
leaveFrom="transform scale-100 opacity-100"
|
|
leaveTo="transform scale-95 opacity-0"
|
|
>
|
|
<Portal>
|
|
<Menu.Items
|
|
ref={container}
|
|
className="z-20 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md border border-gray-200 bg-white shadow-lg outline-none"
|
|
>
|
|
<div className="px-4 py-3">
|
|
<p className="text-sm leading-5">Signed in as</p>
|
|
<p className="truncate text-sm font-medium leading-5 text-gray-900">
|
|
tom@example.com
|
|
</p>
|
|
</div>
|
|
|
|
<div className="py-1">
|
|
<Menu.Item
|
|
as="a"
|
|
href="#account-settings"
|
|
className={resolveClass}
|
|
>
|
|
Account settings
|
|
</Menu.Item>
|
|
<Menu.Item as="a" href="#support" className={resolveClass}>
|
|
Support
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
as="a"
|
|
disabled
|
|
href="#new-feature"
|
|
className={resolveClass}
|
|
>
|
|
New feature (soon)
|
|
</Menu.Item>
|
|
<Menu.Item as="a" href="#license" className={resolveClass}>
|
|
License
|
|
</Menu.Item>
|
|
</div>
|
|
|
|
<div className="py-1">
|
|
<Menu.Item as="a" href="#sign-out" className={resolveClass}>
|
|
Sign out
|
|
</Menu.Item>
|
|
</div>
|
|
</Menu.Items>
|
|
</Portal>
|
|
</Transition>
|
|
</Menu>
|
|
</div>
|
|
<Flatpickr value={date} onChange={([date]) => setDate(date)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex bg-gray-50 px-4 py-3 sm:flex-row-reverse sm:gap-2">
|
|
<Button onClick={() => setIsOpen(false)}>Deactivate</Button>
|
|
<Button onClick={() => setIsOpen(false)}>Cancel</Button>
|
|
</div>
|
|
</Dialog.Panel>
|
|
</Transition.Child>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</Transition>
|
|
</>
|
|
)
|
|
}
|