RealisticSwitch

div()
    .flex()
    .gap_6()
    .child(RealisticSwitch::new("red").size(RealisticSwitchSize::Lg).default_checked(true))
    .child(
        RealisticSwitch::new("blue")
            .size(RealisticSwitchSize::Lg)
            .color(rgb(0x1f6feb))
            .default_checked(true),
    )
    .child(
        RealisticSwitch::new("white")
            .size(RealisticSwitchSize::Lg)
            .color(rgb(0xf5f5f5))
            .mark_color(rgb(0x2a2a2a))
            .illuminated(false),
    )

div()
    .flex()
    .items_center()
    .gap_6()
    .child(RealisticSwitch::new("sm").size(RealisticSwitchSize::Sm))
    .child(RealisticSwitch::new("default"))
    .child(RealisticSwitch::new("lg").size(RealisticSwitchSize::Lg))

use evilbuttons::RealisticSwitch;
use gpui::{div, prelude::*, Context, IntoElement, Render, Window};

struct PowerSwitch;

impl Render for PowerSwitch {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div().child(
            RealisticSwitch::new("main-power").on_change(|on, _, _| println!("power: {on}")),
        )
    }
}

let view = cx.entity();
RealisticSwitch::new("live")
    .checked(self.is_live)
    .on_change(move |on, _, cx| {
        view.update(cx, |this, cx| {
            this.is_live = on;
            cx.notify();
        })
    })
    .color(rgb(0x1f6feb))