"use client";
import * as React from "react";
import { MoonIcon, SparkleIcon, CubeIcon, GavelIcon, type Icon } from "@phosphor-icons/react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

const items = ["Dark mode", "Motion springs", "Clay shadows"];
const icons: Record<string, Icon> = { "Dark mode": MoonIcon, "Motion springs": SparkleIcon, "Clay shadows": CubeIcon };

export default function CheckboxDemo() {
  const [picked, setPicked] = React.useState<string[]>(["Motion springs"]);
  const all = picked.length === items.length ? true : picked.length ? "indeterminate" : false;
  return (
    <div className="grid gap-4">
      <div className="flex items-center gap-3">
        <Checkbox id="cb-all" checked={all} onCheckedChange={(v) => setPicked(v === true ? items : [])} />
        <Label htmlFor="cb-all">Setujui semua RUU</Label>
      </div>
      <div className="grid gap-3 pl-8">
        {items.map((it) => {
          const I = icons[it];
          return (
          <div key={it} className="flex items-center gap-3">
            <Checkbox
              id={`cb-${it}`}
              checked={picked.includes(it)}
              onCheckedChange={(v) => setPicked((p) => (v ? [...p, it] : p.filter((x) => x !== it)))}
            />
            <Label htmlFor={`cb-${it}`} className="flex items-center gap-2 font-semibold"><I weight="bold" className="size-4 text-on-surface-muted" />{it}</Label>
          </div>
          );
        })}
      </div>
      <div className="flex items-center gap-3">
        <Checkbox id="cb-dis" disabled defaultChecked />
        <Label htmlFor="cb-dis" className="flex items-center gap-2"><GavelIcon weight="bold" className="size-4" />Sudah diketok palu</Label>
      </div>
    </div>
  );
}
Installation
