Robin Malfait
ef00732685
- Made the use of `const` and `let` consistent - import required functions and types from 'react' instead of using the `React.` namespace. - Added `Expand` type, which can expand complex types to their "final" result. - Ensured that we use `as const` for DEFAULT_XXX_TAG where we used a string. So that we have the type of `div` instead of `string` for example. - Used `interface` over `type` where possible. I'm personally more of a `type` fan. But the TypeScript recommends `interfaces` where possible because they are faster, yield better error messages and so on.
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Switch } from '@headlessui/react'
|
|
|
|
import { classNames } from '../../src/utils/class-names'
|
|
|
|
export default function Home() {
|
|
let [state, setState] = useState(false)
|
|
|
|
return (
|
|
<div className="flex items-start justify-center w-screen h-full p-12 bg-gray-50">
|
|
<Switch.Group as="div" className="flex items-center space-x-4">
|
|
<Switch.Label>Enable notifications</Switch.Label>
|
|
|
|
<Switch
|
|
as="button"
|
|
checked={state}
|
|
onChange={setState}
|
|
className={({ checked }) =>
|
|
classNames(
|
|
'relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200',
|
|
checked ? 'bg-indigo-600' : 'bg-gray-200'
|
|
)
|
|
}
|
|
>
|
|
{({ checked }) => (
|
|
<>
|
|
<span
|
|
className={classNames(
|
|
'inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200',
|
|
checked ? 'translate-x-5' : 'translate-x-0'
|
|
)}
|
|
/>
|
|
</>
|
|
)}
|
|
</Switch>
|
|
</Switch.Group>
|
|
</div>
|
|
)
|
|
}
|