Dropdown Menu with Checkboxes

"use client";

import { Button } from "@/registry/ui/button";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/registry/ui/dropdown-menu";
import { useState } from "react";

const tags = ["Sport", "Music", "Food", "Travel", "Tech", "Science", "Art"];

export default function DropdownMenuWithCheckboxes() {
  const [selectedTags, setSelectedTags] = useState<string[]>([
    tags[0],
    tags[4],
  ]);

  const handleTagChange = (tag: string, checked: boolean) => {
    if (checked) {
      setSelectedTags([...selectedTags, tag]);
    } else {
      setSelectedTags(selectedTags.filter((t) => t !== tag));
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Select Tags</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-44">
        <DropdownMenuLabel>Select Tags</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {tags.map((tag) => (
          <DropdownMenuCheckboxItem
            checked={selectedTags.includes(tag)}
            key={tag}
            onCheckedChange={(checked) => handleTagChange(tag, checked)}
            // Prevent the dropdown menu from closing when the checkbox is clicked
            onSelect={(e) => e.preventDefault()}
          >
            {tag}
          </DropdownMenuCheckboxItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}