RynextTechnologies/Academia-Front
6
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): migrar componente Switch a HeroUI

Browse Source
This commit is contained in:
Miguel Ortega committed 2026-09-14 21:29:57 -05:00
1 parent 2b53dd0a11
commit 64e54ea472
1 file changed
+101 -80
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/Switch.tsx
+101 -80
View File
@@ -1,5 +1,11 @@
"use client";
import React from 'react';
import React from "react";
import {
Switch as HeroSwitch,
Label,
Description,
} from "@heroui/react";
export interface SwitchProps {
label?: React.ReactNode;
@@ -7,7 +13,7 @@ export interface SwitchProps {
checked?: boolean;
onChange?: (checked: boolean) => void;
disabled?: boolean;
size?: 'sm' | 'md' | 'lg';
size?: "sm" | "md" | "lg";
checkedIcon?: React.ReactNode;
uncheckedIcon?: React.ReactNode;
id?: string;
@@ -16,21 +22,21 @@ export interface SwitchProps {
}
const trackSizes = {
sm: 'w-8 h-4.5',
md: 'w-11 h-6',
lg: 'w-14 h-7.5',
sm: "w-8 h-[18px]",
md: "w-11 h-6",
lg: "w-14 h-[30px]",
};
const thumbSizes = {
sm: 'w-3.5 h-3.5',
md: 'w-5 h-5',
lg: 'w-6.5 h-6.5',
sm: "size-3.5",
md: "size-5",
lg: "size-[26px]",
};
const translateSizes = {
sm: 'translate-x-3.5',
md: 'translate-x-5',
lg: 'translate-x-6.5',
sm: "translate-x-3.5",
md: "translate-x-5",
lg: "translate-x-[26px]",
};
export const Switch: React.FC<SwitchProps> = ({
@@ -39,85 +45,100 @@ export const Switch: React.FC<SwitchProps> = ({
checked = false,
onChange,
disabled = false,
size = 'md',
size = "md",
checkedIcon,
uncheckedIcon,
id,
name,
className = '',
className = "",
}) => {
const switchId = id || name || (typeof label === 'string' ? label.toLowerCase().replace(/\s+/g, '-') : undefined);
const handleClick = () => {
if (!disabled && onChange) {
onChange(!checked);
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
handleClick();
}
};
const switchId =
id ||
name ||
(typeof label === "string"
? label.toLowerCase().replace(/\s+/g, "-")
: undefined);
return (
<div className={`inline-flex items-start gap-3 select-none ${className}`}>
{/* Switch Button */}
<button
id={switchId}
type="button"
role="switch"
aria-checked={checked}
disabled={disabled}
onClick={handleClick}
onKeyDown={handleKeyDown}
className={`
relative shrink-0 inline-flex items-center rounded-full p-0.5 cursor-pointer transition-colors duration-200 ease-in-out
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
focus-visible:ring-cyan-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-950
disabled:opacity-50 disabled:cursor-not-allowed
${trackSizes[size]}
${
checked
? 'bg-cyan-500 dark:bg-cyan-500'
: 'bg-slate-300 dark:bg-slate-700 hover:bg-slate-400 dark:hover:bg-slate-600'
}
`}
>
{/* Thumb */}
<span
<HeroSwitch
id={switchId}
name={name}
isSelected={checked}
isDisabled={disabled}
size={size}
className={className}
onChange={(e: any) => {
if (!onChange || disabled) return;
const val = typeof e === "boolean" ? e : Boolean(e?.target?.checked);
onChange(val);
}}
>
<HeroSwitch.Content>
<HeroSwitch.Control
className={`
pointer-events-none flex items-center justify-center rounded-full bg-white shadow-md transform transition-transform duration-200 ease-in-out text-slate-800
${thumbSizes[size]}
${checked ? translateSizes[size] : 'translate-x-0'}
${trackSizes[size]}
relative shrink-0 inline-flex items-center rounded-full p-0.5
transition-colors duration-200 ease-in-out cursor-pointer
border-0 m-0 box-border outline-none
${
checked
? "bg-cyan-500"
: "bg-slate-300 hover:bg-slate-400 dark:bg-slate-700 dark:hover:bg-slate-600"
}
${disabled ? "cursor-not-allowed opacity-50" : ""}
`}
>
{checked ? checkedIcon : uncheckedIcon}
</span>
</button>
<HeroSwitch.Thumb
className={`
${thumbSizes[size]}
${checked ? translateSizes[size] : "translate-x-0"}
{/* Label and description */}
{(label || description) && (
<div className="flex flex-col text-left cursor-pointer" onClick={handleClick}>
{label && (
<span
className={`text-xs sm:text-sm font-medium transition-colors ${
disabled
? 'text-slate-400 dark:text-slate-600'
: 'text-slate-800 dark:text-slate-200 hover:text-slate-950 dark:hover:text-white'
}`}
>
{label}
</span>
)}
{description && (
<span className="text-xs text-slate-500 dark:text-slate-400">
{description}
</span>
)}
</div>
)}
</div>
border-0 m-0 pointer-events-none shrink-0 flex items-center justify-center
rounded-full bg-white text-slate-800 shadow-md
transition-transform duration-200 ease-in-out
`}
>
{(checkedIcon || uncheckedIcon) && (
<HeroSwitch.Icon>
{checked ? checkedIcon : uncheckedIcon}
</HeroSwitch.Icon>
)}
</HeroSwitch.Thumb>
</HeroSwitch.Control>
{/* TEXTOS */}
{(label || description) && (
<div className="flex flex-col text-left">
{label && (
<Label
className={`
text-xs sm:text-sm font-medium transition-colors cursor-pointer
${
disabled
? "text-slate-400 dark:text-slate-600 cursor-not-allowed"
: "text-slate-800 hover:text-slate-950 dark:text-slate-200 dark:hover:text-white"
}
`}
>
{label}
</Label>
)}
{description && (
<Description
className={`
text-xs text-slate-500 dark:text-slate-400 cursor-pointer
${disabled ? "cursor-not-allowed" : ""}
`}
>
{description}
</Description>
)}
</div>
)}
</HeroSwitch.Content>
</HeroSwitch>
);
};