"use client"; import { useState } from "react"; import { Checkbox } from "@/registry/default/ui/checkbox"; import { CheckboxGroup } from "@/registry/default/ui/checkbox-group"; import { Label } from "@/registry/default/ui/label"; const mainPermissions = [ { id: "view-dashboard", name: "View Dashboard" }, { id: "manage-users", name: "Manage Users" }, { id: "access-reports", name: "Access Reports" }, ]; const userManagementPermissions = [ { id: "create-user", name: "Create User" }, { id: "edit-user", name: "Edit User" }, { id: "delete-user", name: "Delete User" }, { id: "assign-roles", name: "Assign Roles" }, ]; export default function Particle() { const [mainValue, setMainValue] = useState([]); const [managementValue, setManagementValue] = useState([]); const managementIsPartial = managementValue.length > 0 && managementValue.length !== userManagementPermissions.length; return ( p.id)} aria-labelledby="user-permissions-caption" onValueChange={(value) => { if (value.includes("manage-users")) { setManagementValue(userManagementPermissions.map((p) => p.id)); } else if ( managementValue.length === userManagementPermissions.length ) { setManagementValue([]); } setMainValue(value); }} value={mainValue} > User Permissions {mainPermissions .filter((p) => p.id !== "manage-users") .map((p) => ( {p.name} ))} p.id)} aria-labelledby="manage-users-caption" className="ms-4" onValueChange={(value) => { if (value.length === userManagementPermissions.length) { setMainValue((prev) => Array.from(new Set([...prev, "manage-users"])), ); } else { setMainValue((prev) => prev.filter((v) => v !== "manage-users")); } setManagementValue(value); }} value={managementValue} > Manage Users {userManagementPermissions.map((p) => ( {p.name} ))} ); }

Checkbox Group 4

Instalação

Registry dependencies