A hardware-style rocker switch button that tilts and clicks over between on/off states, with a glowing LED indicator.
"use client";
import RockerSwitch from "@/components/ui/rocker-switch";
import { useState } from "react";
export default function RockerSwitchDemo() {
const [mains, setMains] = useState(true);
const [fan, setFan] = useState(false);
const [lamp, setLamp] = useState(false);
return (
<div className="flex min-h-full w-full items-center justify-center p-10 bg-[#0e0f11] text-[#d9dadd]">
<div className="flex gap-8 rounded-[18px] px-9 py-7 bg-[#1a1b1e] shadow-[inset_0_1px_0_rgb(255_255_255/0.05),0_20px_40px_-20px_rgb(0_0_0/0.8)]">
<RockerSwitch label="Mains" checked={mains} onChange={setMains} />
<RockerSwitch
label="Fan"
checked={fan}
onChange={setFan}
led="#45d483"
/>
<RockerSwitch
label="Lamp"
checked={lamp}
onChange={setLamp}
led="#ffc23d"
/>
</div>
</div>
);
}