yangy
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
/* ============================================================
|
|
GLASS TOGGLE — Apple-style glass toggle switch
|
|
============================================================ */
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface GlassToggleProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
size?: "sm" | "md";
|
|
}
|
|
|
|
export default function GlassToggle({ checked, onChange, disabled, size = "md" }: GlassToggleProps) {
|
|
const isSmall = size === "sm";
|
|
|
|
return (
|
|
<button
|
|
role="switch"
|
|
aria-checked={checked}
|
|
disabled={disabled}
|
|
onClick={() => onChange(!checked)}
|
|
className={cn(
|
|
"relative rounded-full transition-all duration-300 flex-shrink-0 focus:outline-none",
|
|
isSmall ? "w-9 h-5" : "w-11 h-6",
|
|
disabled && "opacity-40 cursor-not-allowed",
|
|
checked
|
|
? "bg-[#00FFF6] shadow-[0_0_12px_rgba(0,255,246,0.5)]"
|
|
: "bg-white/10 border border-white/15"
|
|
)}
|
|
style={{
|
|
boxShadow: checked
|
|
? "0 0 16px rgba(0,255,246,0.4), inset 0 1px 0 rgba(255,255,255,0.3)"
|
|
: "inset 0 1px 0 rgba(255,255,255,0.08)",
|
|
}}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"absolute top-0.5 rounded-full transition-all duration-300",
|
|
isSmall ? "w-4 h-4" : "w-5 h-5",
|
|
checked
|
|
? isSmall ? "left-[18px]" : "left-[22px]"
|
|
: "left-0.5"
|
|
)}
|
|
style={{
|
|
background: checked
|
|
? "#0a1a1a"
|
|
: "rgba(255,255,255,0.7)",
|
|
boxShadow: "0 1px 4px rgba(0,0,0,0.3)",
|
|
}}
|
|
/>
|
|
</button>
|
|
);
|
|
}
|