Checkbox

// owner: Sona
"use client";

import * as React from "react";

import { Checkbox } from "@/components/ui/checkbox";

const permissions = ["Read", "Create", "Update", "Delete"];

export default function CheckboxExample() {
  const [checked, setChecked] = React.useState(
    () => new Set(["Read", "Update"])
  );

  return (
    <div className="space-y-3">
      {permissions.map((permission) => (
        <label key={permission} className="flex items-center gap-3 text-sm">
          <Checkbox
            checked={checked.has(permission)}
            onCheckedChange={(value) => {
              setChecked((prev) => {
                const next = new Set(prev);
                if (value) {
                  next.add(permission);
                } else {
                  next.delete(permission);
                }
                return next;
              });
            }}
          />
          <span>{permission} access</span>
        </label>
      ))}
    </div>
  );
}