Select

"use client";
import React from "react";
import { Select } from "@/components/ui/select";

function MyOption(props) {
  var value = props.value;
  return (
    <Select.Option {...props} value={value}>
      {value.name} ({value.acronym})
    </Select.Option>
  );
}

var data = [
  { id: "1", name: "United States Dollar", acronym: "USD" },
  { id: "2", name: "Euro", acronym: "EUR" },
  { id: "3", name: "Japanese Yen", acronym: "JPY" },
  { id: "4", name: "British Pound", acronym: "GBP" },
  { id: "5", name: "Australian Dollar", acronym: "AUD" },
  { id: "6", name: "Canadian Dollar", acronym: "CAD" },
  { id: "7", name: "Swiss Franc", acronym: "CHF" },
  { id: "8", name: "Chinese Yuan", acronym: "CNY" },
  { id: "9", name: "Swedish Krona", acronym: "SEK" },
  { id: "10", name: "New Zealand Dollar", acronym: "NZD" },
];

function filterOption(currency, input) {
  return (
    currency.name.toLowerCase().includes(input.toLowerCase()) ||
    currency.acronym.toLowerCase().includes(input.toLowerCase())
  );
}

export default function SelectCurrencySearchDemo() {
  var state = React.useState(null);
  var value = state[0];
  var setValue = state[1];

  return (
    <div className="w-full max-w-sm">
      <Select
        value={value}
        placeholder="Select currency"
        filterOption={filterOption}
        components={{ Option: MyOption }}
        onChange={setValue}
      >
        {data.map(function (item) {
          return (
            <Select.Item key={item.id} value={item}>
              {item.name}
            </Select.Item>
          );
        })}
      </Select>
    </div>
  );
}