since3-portal/modules/templates/ui/components/editor/toggle.tsx

"use client"

import type { ReactNode } from "react"
import { cn } from "@/lib/utils"

export function Toggle({ checked, onChange, children }: { checked: boolean; onChange: (checked: boolean) => void; children: ReactNode }) {
    return (
        <label className="flex cursor-pointer items-center justify-between gap-3 px-3 py-2.5 text-sm">
            <span className="min-w-0">{children}</span>
            <button
                type="button"
                role="switch"
                aria-checked={checked}
                onClick={() => onChange(!checked)}
                className={cn("relative h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors", checked ? "bg-primary" : "bg-ink-300 dark:bg-ink-700")}
            >
                <span className={cn("absolute top-0.5 left-0.5 size-4 rounded-full bg-background shadow transition-transform", checked && "translate-x-4")} />
            </button>
        </label>
    )
}