"use client";

import * as React from "react"

import { MultiSelect, MultiSelectOptionDef } from "./multi-select"

const FRAMEWORKS: MultiSelectOptionDef[] = [

{

label: "React",

items: [

{ value: "next.js", label: "Next.js" },

{ value: "remix", label: "Remix" },

{ value: "astro", label: "Astro" },

]

},

{

label: "Other frameworks",

items: [

{ value: "nuxt", label: "Nuxt" },

{ value: "sveltekit", label: "SvelteKit" },

{ value: "tanstack-start", label: "TanStack Start" },

{ value: "legacy", label: "Legacy framework", disabled: true },

]

}

];

export function MultiSelectDemo() {

const [value, setValue] = React.useState<string[]>([])

return (

<div className="w-full h-full flex items-center justify-center p-4 sm:p-6 md:p-8">

<MultiSelect

value={value}

onValueChange={setValue}

options={FRAMEWORKS}

placeholder="Pick frameworks"

className="w-[270px] sm:w-[320px] max-w-full"

/>

</div>

)

}