92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { Autocomplete, useFilter } from "react-aria-components"
|
|
|
|
import { Button } from "@/styles/aria-nova/ui/button"
|
|
import {
|
|
Select,
|
|
SelectEmpty,
|
|
SelectGroup,
|
|
SelectInput,
|
|
SelectItem,
|
|
SelectList,
|
|
SelectPopover,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/styles/aria-nova/ui/select"
|
|
|
|
const countries = [
|
|
{
|
|
code: "ar",
|
|
value: "argentina",
|
|
label: "Argentina",
|
|
continent: "South America",
|
|
},
|
|
{ code: "au", value: "australia", label: "Australia", continent: "Oceania" },
|
|
{ code: "br", value: "brazil", label: "Brazil", continent: "South America" },
|
|
{ code: "ca", value: "canada", label: "Canada", continent: "North America" },
|
|
{ code: "cn", value: "china", label: "China", continent: "Asia" },
|
|
{
|
|
code: "co",
|
|
value: "colombia",
|
|
label: "Colombia",
|
|
continent: "South America",
|
|
},
|
|
{ code: "eg", value: "egypt", label: "Egypt", continent: "Africa" },
|
|
{ code: "fr", value: "france", label: "France", continent: "Europe" },
|
|
{ code: "de", value: "germany", label: "Germany", continent: "Europe" },
|
|
{ code: "it", value: "italy", label: "Italy", continent: "Europe" },
|
|
{ code: "jp", value: "japan", label: "Japan", continent: "Asia" },
|
|
{ code: "ke", value: "kenya", label: "Kenya", continent: "Africa" },
|
|
{ code: "mx", value: "mexico", label: "Mexico", continent: "North America" },
|
|
{
|
|
code: "nz",
|
|
value: "new-zealand",
|
|
label: "New Zealand",
|
|
continent: "Oceania",
|
|
},
|
|
{ code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" },
|
|
{
|
|
code: "za",
|
|
value: "south-africa",
|
|
label: "South Africa",
|
|
continent: "Africa",
|
|
},
|
|
{ code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" },
|
|
{
|
|
code: "gb",
|
|
value: "united-kingdom",
|
|
label: "United Kingdom",
|
|
continent: "Europe",
|
|
},
|
|
{
|
|
code: "us",
|
|
value: "united-states",
|
|
label: "United States",
|
|
continent: "North America",
|
|
},
|
|
]
|
|
|
|
export function SelectAutocomplete() {
|
|
const { contains } = useFilter({ sensitivity: "base" })
|
|
return (
|
|
<Select placeholder="Select country" className="w-full max-w-48">
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<Autocomplete filter={contains}>
|
|
<SelectPopover>
|
|
<SelectInput />
|
|
<SelectList
|
|
renderEmptyState={() => <SelectEmpty>No items found.</SelectEmpty>}
|
|
>
|
|
<SelectGroup items={countries}>
|
|
{(item) => <SelectItem id={item.value}>{item.label}</SelectItem>}
|
|
</SelectGroup>
|
|
</SelectList>
|
|
</SelectPopover>
|
|
</Autocomplete>
|
|
</Select>
|
|
)
|
|
}
|