highperfocused/open-saas
1
0
Fork 0
mirror of https://github.com/wasp-lang/open-saas.git synced 2025-06-16 03:40:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Collect switcher labels and inputs with IDs

Browse Source
This commit is contained in:
Filip Sodić 2025-02-21 15:46:31 +01:00
parent 3adfacc5ed
commit d64dff82d2
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
template/app/src/admin/elements/forms/SwitcherOne.tsx
View File

@ -1,11 +1,14 @@
import { useId } from 'react';
import { cn } from '../../../client/cn'; import { cn } from '../../../client/cn';
const SwitcherOne = ({ isOn, onChange }: { isOn: boolean; onChange: (value: boolean) => void }) => { const SwitcherOne = ({ isOn, onChange }: { isOn: boolean; onChange: (value: boolean) => void }) => {
const id = useId();
return ( return (
<div className='relative'> <div className='relative'>
<label className='flex cursor-pointer select-none items-center'> <label htmlFor={id} className='flex cursor-pointer select-none items-center'>
<div className='relative'> <div className='relative'>
<input type='checkbox' className='sr-only' onChange={(e) => onChange(e.target.checked)} /> <input id={id} type='checkbox' className='sr-only' onChange={(e) => onChange(e.target.checked)} />
<div className='reblock h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]'></div> <div className='reblock h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]'></div>
<div <div
className={cn('absolute left-1 top-1 h-6 w-6 rounded-full bg-white dark:bg-gray-400 transition', { className={cn('absolute left-1 top-1 h-6 w-6 rounded-full bg-white dark:bg-gray-400 transition', {

12
template/app/src/admin/elements/forms/SwitcherTwo.tsx
View File

@ -1,16 +1,14 @@
import { useId } from 'react';
import { cn } from '../../../client/cn'; import { cn } from '../../../client/cn';
const SwitcherTwo = ({ isOn, onChange }: { isOn: boolean; onChange: (value: boolean) => void }) => { const SwitcherTwo = ({ isOn, onChange }: { isOn: boolean; onChange: (value: boolean) => void }) => {
const id = useId();
return ( return (
<div> <div>
<label className='flex cursor-pointer select-none items-center'> <label htmlFor={id} className='flex cursor-pointer select-none items-center'>
<div className='relative'> <div className='relative'>
<input <input type='checkbox' id={id} className='sr-only' onChange={(e) => onChange(e.target.checked)} />
type='checkbox'
id='toggle3'
className='sr-only'
onChange={(e) => onChange(e.target.checked)}
/>
<div className='block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]'></div> <div className='block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]'></div>
<div <div
className={cn( className={cn(