24 lines
739 B
TypeScript
24 lines
739 B
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { Switch } from '@headlessui/react'
|
|
|
|
export default function MyToggle() {
|
|
const [enabled, setEnabled] = useState(false)
|
|
|
|
return (
|
|
<Switch
|
|
checked={enabled}
|
|
onChange={setEnabled}
|
|
className={`${
|
|
enabled ? 'bg-blue-600' : 'bg-gray-200'
|
|
} relative inline-flex h-6 w-11 items-center rounded-full`}
|
|
>
|
|
<span className="sr-only">Enable notifications</span>
|
|
<span
|
|
className={`${
|
|
enabled ? 'translate-x-6' : 'translate-x-1'
|
|
} inline-block h-4 w-4 transform rounded-full bg-white transition`}
|
|
/>
|
|
</Switch>
|
|
)
|
|
} |