"use client"import { useState } from "react"import { Check, ChevronsUpDown } from "lucide-react"import { Button } from "@/components/ui/8bit/button"import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/8bit/popover"import { cn } from "@/lib/utils"const frameworks = ["Next.js", "Astro", "Remix", "SvelteKit", "Nuxt"]export default function ComboBoxDemo() {  const [value, setValue] = useState("Next.js")  return (    <Popover defaultOpen>      <PopoverTrigger asChild>        <Button variant="outline" role="combobox" aria-expanded="true" className="w-full max-w-xs justify-between">          {value || "Select a framework..."}          <ChevronsUpDown className="size-4 opacity-50" />        </Button>      </PopoverTrigger>      <PopoverContent className="w-[--radix-popover-trigger-width] p-0">        <Command>          <CommandInput placeholder="Search frameworks..." />          <CommandList>            <CommandEmpty>No framework found.</CommandEmpty>            <CommandGroup>              {frameworks.map((framework) => (                <CommandItem key={framework} value={framework} onSelect={(currentValue) => setValue(currentValue)}>                  <Check className={cn("mr-2 size-4", value === framework ? "opacity-100" : "opacity-0")} />                  {framework}                </CommandItem>              ))}            </CommandGroup>          </CommandList>        </Command>      </PopoverContent>    </Popover>  )}