[V0_FILE]typescriptreact:file="components/select-with-search.tsx" isEdit="true" isQuickEdit="true" "use client" import { useId, useState } from "react" import { CheckIcon, ChevronDownIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" const frameworks = [ { value: "next.js", label: "Next.js", }, { value: "sveltekit", label: "SvelteKit", }, { value: "nuxt.js", label: "Nuxt.js", }, { value: "remix", label: "Remix", }, { value: "astro", label: "Astro", }, { value: "angular", label: "Angular", }, { value: "vue", label: "Vue.js", }, { value: "react", label: "React", }, { value: "ember", label: "Ember.js", }, { value: "gatsby", label: "Gatsby", }, { value: "eleventy", label: "Eleventy", }, { value: "solid", label: "SolidJS", }, { value: "preact", label: "Preact", }, { value: "qwik", label: "Qwik", }, { value: "alpine", label: "Alpine.js", }, { value: "lit", label: "Lit", }, ] interface SelectWithSearchProps { value?: string onChange?: (value: string) => void } export function SelectWithSearch({ value: externalValue, onChange }: SelectWithSearchProps) { const id = useId() const [open, setOpen] = useState(false) const [internalValue, setInternalValue] = useState(externalValue || "") // Use external value if provided const value = externalValue !== undefined ? externalValue : internalValue const handleSelect = (currentValue: string) => { const newValue = currentValue === value ? "" : currentValue setInternalValue(newValue) onChange?.(newValue) setOpen(false) } return (

No framework found. {frameworks.map((framework) => ( {framework.label} {value === framework.value && } ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { zodResolver } from "@hookform/resolvers/zod" import { Check, ChevronsUpDown } from "lucide-react" import { useForm } from "react-hook-form" import * as z from "zod" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { toast } from "@/components/ui/use-toast" import { cn } from "@/lib/utils" import { SelectWithSearch } from "@/components/select-with-search" const frameworks = [ { label: "Next.js", value: "next.js" }, { label: "React", value: "react" }, { label: "Vue", value: "vue" }, { label: "Angular", value: "angular" }, { label: "Svelte", value: "svelte" }, ] const languages = [ { label: "TypeScript", value: "typescript" }, { label: "JavaScript", value: "javascript" }, { label: "Python", value: "python" }, { label: "Go", value: "go" }, { label: "Rust", value: "rust" }, ] const FormSchema = z.object({ framework: z.string({ required_error: "Please select a framework.", }), language: z.string({ required_error: "Please select a language.", }), customFramework: z.string().optional(), }) export default function Page() { const [open, setOpen] = useState(false) const form = useForm>({ resolver: zodResolver(FormSchema), }) function onSubmit(data: z.infer) { toast({ title: "You submitted the following values:", description: (

          {JSON.stringify(data, null, 2)}

), }) setOpen(false) } return (

Custom Select with Search

Dropdown with Dialog Form

Actions Dashboard Settings Logout

) }