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

29
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>(
({ className, checked, onCheckedChange, disabled, ...props }, ref) => (
<label className={cn(
"relative inline-flex items-center cursor-pointer",
disabled && "cursor-not-allowed opacity-50"
)}>
<input <input
type="checkbox" type="checkbox"
className="sr-only peer" className="sr-only peer"
ref={ref} ref={ref}
checked={checked}
disabled={disabled}
onChange={(e) => onCheckedChange?.(e.target.checked)}
{...props} {...props}
/> />
<div className={cn( <div className={cn(
"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", "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 className
)}></div> )}></div>
</label> </label>
)) )
)
Switch.displayName = "Switch" Switch.displayName = "Switch"
export { Switch } export { Switch }