nextjs-tailwindcss-headlessUI-project/app/components/options/4/page.tsx

"use client";

import { Button } from "@/components/ui/button";
import { MenuItem } from "../types";
import { PlusIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { useState } from "react";
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Checkbox } from "@radix-ui/react-checkbox";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

const menuItems: MenuItem[] = [
  { name: "打印表单" },
  { name: "模板分享" },
  { name: "文件管理" },
  { separator: true },
  {
    icon: <PlusIcon className="mr-2 h-4 w-4" />,
    name: "新建标签",
  },
];

export default function TagOption() {
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState("");
  // const handleSelect = (id: string) => {
  //   if (selectedTags.includes(id)) {
  //     setSelectedTags(selectedTags.filter((it) => it !== id));
  //   } else {
  //     setSelectedTags([...selectedTags, id]);
  //   }
  // };
  return (
    // <Popover open={open} onOpenChange={setOpen}>
    //   <PopoverTrigger asChild>
    //     <Button variant="outline" aria-expanded={open}>
    //       Tag
    //     </Button>
    //   </PopoverTrigger>
    //   <PopoverContent className="w-[200px] p-0">
    <Command className={cn("rounded-lg border shadow-md h-fit")}>
      <CommandList>
        <CommandGroup>
          <CommandItem className="flex justify-between items-center">
            <div className="flex justify-start items-center gap-2">
              <Checkbox />
              <div className={cn("h-2 w-2 rounded-[2px]")} />
              <span>{"stes"}</span>
            </div>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
    //   </PopoverContent>
    // </Popover>
  );
}