"use client"; import { type ChangeEvent, useState } from "react"; export default function ThemeToggle() { const [checked, setChecked] = useState(false); const handleChange = (event: ChangeEvent) => { setChecked(event.target.checked); }; const wrapperClassName = checked ? "bg-transparent text-[#f8fafc]" : "bg-transparent text-[#0f172a]"; const toggleWrapperClassName = checked ? "bg-gradient-to-b from-[#111827] to-[#273244] shadow-[inset_0_1px_0_rgb(255_255_255/0.08),0_1px_1px_rgb(0_0_0/0.5)]" : "bg-gradient-to-b from-[#d5d5d5] to-[#e8e8e8] shadow-[0_1px_1px_rgb(255_255_255/0.6)]"; const containerClassName = checked ? "bg-[#1f2937] shadow-[inset_0_0_0.0625em_0.125em_rgb(255_255_255/0.05),inset_0_0.0625em_0.125em_rgb(0_0_0/0.75)] peer-checked:bg-[#1d4ed8] peer-checked:[&_[data-toggle-button]]:translate-x-[1.5em]" : "bg-[#e8e8e8] shadow-[inset_0_0_0.0625em_0.125em_rgb(255_255_255/0.2),inset_0_0.0625em_0.125em_rgb(0_0_0/0.4)] peer-checked:bg-[#1d4ed8] peer-checked:[&_[data-toggle-button]]:translate-x-[1.5em]"; const buttonClassName = checked ? "bg-[#c5cdd8] shadow-[inset_0_-0.0625em_0.0625em_0.125em_rgb(0_0_0/0.16),inset_0_-0.125em_0.0625em_rgb(0_0_0/0.22),inset_0_0.1875em_0.0625em_rgb(255_255_255/0.5),0_0.125em_0.125em_rgb(0_0_0/0.45)]" : "bg-[#e8e8e8] shadow-[inset_0_-0.0625em_0.0625em_0.125em_rgb(0_0_0/0.1),inset_0_-0.125em_0.0625em_rgb(0_0_0/0.2),inset_0_0.1875em_0.0625em_rgb(255_255_255/0.3),0_0.125em_0.125em_rgb(0_0_0/0.5)]"; const circleClassName = checked ? "bg-[radial-gradient(circle_at_50%_0,#eef2f7,#64748b)]" : "bg-[radial-gradient(circle_at_50%_0,#f5f5f5,#c4c4c4)]"; return (

{Array.from({ length: 12 }).map((_, index) => (

))}

); }