Checkbox

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

export default function Basic() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="basic-checkbox" />
      <Label htmlFor="basic-checkbox">I agree to everything</Label>
    </div>
  );
}

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

export default function Disabled() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="disabled-checkbox" disabled />
      <Label htmlFor="disabled-checkbox">I agree to everything</Label>
    </div>
  );
}

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

export default function Horizontal() {
  return (
    <fieldset className="space-y-3">
      <legend className="text-sm font-medium text-muted-foreground">
        Privacy:
      </legend>
      <div className="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0">
        <div className="flex items-center gap-2">
          <Checkbox id="private-checkbox" />
          <Label htmlFor="private-checkbox">Private (Only Me)</Label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox id="link-checkbox" />
          <Label htmlFor="link-checkbox">Shared via Link</Label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox id="public-checkbox" />
          <Label htmlFor="public-checkbox">Public</Label>
        </div>
      </div>
    </fieldset>
  );
}

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

export default function WithDescription() {
  return (
    <fieldset className="space-y-6">
      <div className="flex gap-2">
        <Checkbox id="tasks-checkbox" />
        <Label htmlFor="tasks-checkbox" className="flex-col items-start">
          <span>Tasks</span>
          <span className="font-normal text-muted-foreground">
            Get notified if there are new tasks added to your project, or if a
            task is completed.
          </span>
        </Label>
      </div>
      <div className="flex gap-2">
        <Checkbox id="projects-checkbox" />
        <Label htmlFor="projects-checkbox" className="flex-col items-start">
          <span>Projects</span>
          <span className="font-normal text-muted-foreground">
            Get notified if there&#x27;s are new projects added to your teams.
          </span>
        </Label>
      </div>
    </fieldset>
  );
}

"use client";

import { useState } from "react";
import { Card } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import {
  BoundingBox,
  Rainbow,
  Ruler,
  SmileGhost,
  Swatches,
  TypeText,
} from "@mynaui/icons-react";

// Define the customization options
const customizationOptions = [
  {
    id: "colors",
    title: "Colors",
    icon: <Swatches />,
  },
  {
    id: "shadows",
    title: "Shadows and Blurs",
    icon: <BoundingBox />,
  },
  {
    id: "typography",
    title: "Typography",
    icon: <TypeText />,
  },
  {
    id: "spacing",
    title: "Spacing and Grid",
    icon: <Ruler />,
  },
  {
    id: "emojis",
    title: "Emojis",
    icon: <SmileGhost />,
  },
  {
    id: "theming",
    title: "Theming",
    icon: <Rainbow />,
  },
];

export default function Checkbox5() {
  // Initialize with colors and emojis selected as shown in the image
  const [selectedOptions, setSelectedOptions] = useState({
    colors: true,
    shadows: false,
    typography: false,
    spacing: false,
    emojis: true,
    theming: false,
  });

  // Toggle selection for an option
  const toggleOption = (id: string) => {
    setSelectedOptions((prev) => ({
      ...prev,
      [id]: !prev[id as keyof typeof prev],
    }));
  };

  return (
    <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      {customizationOptions.map((option) => {
        const isSelected =
          selectedOptions[option.id as keyof typeof selectedOptions];

        return (
          <Card
            key={option.id}
            className={`relative cursor-pointer p-4 gap-3 transition-all ring-1 ${
              isSelected ? "border-primary ring-primary" : "ring-transparent"
            }`}
            onClick={() => toggleOption(option.id)}
          >
            <div className="absolute right-3 top-3">
              <Checkbox
                id={`checkbox-${option.id}`}
                checked={isSelected}
                onCheckedChange={() => toggleOption(option.id)}
                className="data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground rounded-full"
              />
            </div>
            <div className={`${isSelected ? "text-primary" : ""}`}>
              {option.icon}
            </div>
            <h3
              className={`text-sm font-medium ${
                isSelected ? "text-primary" : ""
              }`}
            >
              {option.title}
            </h3>
          </Card>
        );
      })}
    </div>
  );
}