runfoo-org/elmeg-demo
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Update Switch component to properly handle onCheckedChange prop
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-23 13:00:06 -08:00
parent 9e48dd78ff
commit 824a70d303
1 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
frontend/components/ui/switch.tsx
View file

@ -3,23 +3,38 @@
import * as React from "react" import * as React from "react"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
const Switch = React.forwardRef< interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
HTMLInputElement, onCheckedChange?: (checked: boolean) => void
React.InputHTMLAttributes<HTMLInputElement> }
>(({ className, ...props }, ref) => (
<label className="relative inline-flex items-center cursor-pointer"> const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
<input ({ className, checked, onCheckedChange, disabled, ...props }, ref) => (
type="checkbox" <label className={cn(
className="sr-only peer" "relative inline-flex items-center cursor-pointer",
ref={ref} disabled && "cursor-not-allowed opacity-50"
{...props} )}>
/> <input
<div className={cn( type="checkbox"
"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600", className="sr-only peer"
className ref={ref}
)}></div> checked={checked}
</label> disabled={disabled}
)) onChange={(e) => onCheckedChange?.(e.target.checked)}
{...props}
/>
<div className={cn(
"w-11 h-6 rounded-full transition-colors",
"bg-muted peer-checked:bg-primary",
"peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
"after:content-[''] after:absolute after:top-[2px] after:left-[2px]",
"after:bg-background after:border after:border-muted after:rounded-full",
"after:h-5 after:w-5 after:transition-transform",
"peer-checked:after:translate-x-5 peer-checked:after:border-primary",
className
)}></div>
</label>
)
)
Switch.displayName = "Switch" Switch.displayName = "Switch"
export { Switch } export { Switch }