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
73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { Portal } from '@headlessui/react'
|
|
import { lazy, Suspense } from 'react'
|
|
|
|
function MyComponent({ children }: { children(message: string): JSX.Element }) {
|
|
return <>{children('test')}</>
|
|
}
|
|
|
|
let MyComponentLazy = lazy(async () => {
|
|
await new Promise((resolve) => setTimeout(resolve, 4000))
|
|
|
|
return { default: MyComponent }
|
|
})
|
|
|
|
export default function Index() {
|
|
return (
|
|
<div>
|
|
<h1 className="p-8 text-3xl font-bold">Suspense + Portals</h1>
|
|
|
|
<Portal>
|
|
<div className="absolute right-48 top-24 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
|
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
|
Instant
|
|
</div>
|
|
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400">
|
|
1
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
<Portal>
|
|
<div className="absolute right-8 top-24 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
|
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
|
Instant
|
|
</div>
|
|
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400">
|
|
2
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
|
|
<Suspense fallback={<span>Loading ...</span>}>
|
|
<MyComponentLazy>
|
|
{(env) => (
|
|
<div>
|
|
<Portal>
|
|
<div className="absolute right-48 top-64 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
|
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
|
Suspense
|
|
</div>
|
|
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400">
|
|
{env} 1
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
<Portal>
|
|
<div className="absolute right-8 top-64 z-10 flex h-32 w-32 flex-col items-center justify-center rounded border border-black/5 bg-white bg-clip-padding p-px shadow">
|
|
<div className="w-full rounded-t-sm bg-gray-100 p-1 text-center text-gray-700">
|
|
Suspense
|
|
</div>
|
|
<div className="flex w-full flex-1 items-center justify-center text-3xl font-bold text-gray-400">
|
|
{env} 2
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
</div>
|
|
)}
|
|
</MyComponentLazy>
|
|
</Suspense>
|
|
</div>
|
|
)
|
|
}
|