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
102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
import { RadioGroup } from '@headlessui/react'
|
|
import { useState } from 'react'
|
|
import { classNames } from '../../utils/class-names'
|
|
|
|
export default function Home() {
|
|
let access = [
|
|
{
|
|
id: 'access-1',
|
|
name: 'Public access',
|
|
description: 'This project would be available to anyone who has the link',
|
|
},
|
|
{
|
|
id: 'access-2',
|
|
name: 'Private to Project Members',
|
|
description: 'Only members of this project would be able to access',
|
|
},
|
|
{
|
|
id: 'access-3',
|
|
name: 'Private to you',
|
|
description: 'You are the only one able to access this project',
|
|
},
|
|
]
|
|
let [active, setActive] = useState()
|
|
|
|
return (
|
|
<div className="max-w-xl p-12">
|
|
<a href="/">Link before</a>
|
|
<RadioGroup value={active} onChange={setActive}>
|
|
<fieldset className="space-y-4">
|
|
<legend>
|
|
<h2 className="text-xl">Privacy setting</h2>
|
|
</legend>
|
|
|
|
<div className="-space-y-px rounded-md bg-white">
|
|
{access.map(({ id, name, description }, i) => {
|
|
return (
|
|
<RadioGroup.Option
|
|
key={id}
|
|
value={id}
|
|
className={({ active }) =>
|
|
classNames(
|
|
// Rounded corners
|
|
i === 0 && 'rounded-tl-md rounded-tr-md',
|
|
access.length - 1 === i && 'rounded-bl-md rounded-br-md',
|
|
|
|
// Shared
|
|
'relative flex border p-4 focus:outline-none',
|
|
active ? 'z-10 border-indigo-200 bg-indigo-50' : 'border-gray-200'
|
|
)
|
|
}
|
|
>
|
|
{({ active, checked }) => (
|
|
<div className="flex w-full items-center justify-between">
|
|
<div className="ml-3 flex cursor-pointer flex-col">
|
|
<span
|
|
className={classNames(
|
|
'block text-sm font-medium leading-5',
|
|
active ? 'text-indigo-900' : 'text-gray-900'
|
|
)}
|
|
>
|
|
{name}
|
|
</span>
|
|
<span
|
|
className={classNames(
|
|
'block text-sm leading-5',
|
|
active ? 'text-indigo-700' : 'text-gray-500'
|
|
)}
|
|
>
|
|
{description}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
{checked && (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
className="h-5 w-5 text-indigo-500"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</RadioGroup.Option>
|
|
)
|
|
})}
|
|
</div>
|
|
</fieldset>
|
|
</RadioGroup>
|
|
<a href="/">Link after</a>
|
|
</div>
|
|
)
|
|
}
|