open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Extract switch to switch-setting

Browse Source
This commit is contained in:
Ian Philips 2022-09-12 09:19:38 -06:00
parent bb4dc54299
commit d6c1ba88d4
2 changed files with 45 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/components/notification-settings.tsx
View File

@ -8,7 +8,6 @@ import {
notification_destination_types,
} from 'common/user'
import { updatePrivateUser } from 'web/lib/firebase/users'
import { Switch } from '@headlessui/react'
import { Col } from 'web/components/layout/col'
import {
CashIcon,
@ -26,6 +25,7 @@ import {
import { WatchMarketModal } from 'web/components/contract/watch-market-modal'
import { filterDefined } from 'common/util/array'
import toast from 'react-hot-toast'
import { SwitchSetting } from 'web/components/switch'
export function NotificationSettings(props: {
navigateToSection: string | undefined
@ -218,54 +218,18 @@ export function NotificationSettings(props: {
</Row>
<Row className={'gap-4'}>
{!browserDisabled.includes(key) && (
<Switch.Group as="div" className="flex items-center">
<Switch
<SwitchSetting
checked={inAppEnabled}
onChange={setInAppEnabled}
className={clsx(
inAppEnabled ? 'bg-indigo-600' : 'bg-gray-200',
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
)}
>
<span
aria-hidden="true"
className={clsx(
inAppEnabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
)}
label={'In App'}
/>
</Switch>
<Switch.Label as="span" className="ml-3">
<span className="text-sm font-medium text-gray-900">
In-app
</span>
</Switch.Label>
</Switch.Group>
)}
{emailsEnabled.includes(key) && (
<Switch.Group as="div" className="flex items-center">
<Switch
<SwitchSetting
checked={emailEnabled}
onChange={setEmailEnabled}
className={clsx(
emailEnabled ? 'bg-indigo-600' : 'bg-gray-200',
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
)}
>
<span
aria-hidden="true"
className={clsx(
emailEnabled ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
)}
label={'Emails'}
/>
</Switch>
<Switch.Label as="span" className="ml-3">
<span className="text-sm font-medium text-gray-900">
Emails
</span>
</Switch.Label>
</Switch.Group>
)}
</Row>
</Col>

34
web/components/switch-setting.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Switch } from '@headlessui/react'
import clsx from 'clsx'
import React from 'react'
export const SwitchSetting = (props: {
checked: boolean
onChange: (checked: boolean) => void
label: string
}) => {
const { checked, onChange, label } = props
return (
<Switch.Group as="div" className="flex items-center">
<Switch
checked={checked}
onChange={onChange}
className={clsx(
checked ? 'bg-indigo-600' : 'bg-gray-200',
'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
)}
>
<span
aria-hidden="true"
className={clsx(
checked ? 'translate-x-5' : 'translate-x-0',
'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
)}
/>
</Switch>
<Switch.Label as="span" className="ml-3">
<span className="text-sm font-medium text-gray-900">{label}</span>
</Switch.Label>
</Switch.Group>
)
}