Reshaped Autocomplete

import * as React from "react";
import { Avatar, Badge, Reshaped } from "reshaped/bundle";
import type { AutocompleteProps } from "reshaped/bundle";
import Autocomplete from "@/components/ui/reshaped-autocomplete";

const options = [
  {
    title: "Paul Farell",
    role: "Designer",
    photo: "https://www.reshaped.so/img/examples/avatar-3.png",
  },
  {
    title: "Esther Naomi",
    role: "Developer",
    photo: "https://www.reshaped.so/img/examples/avatar-2.png",
  },
  {
    title: "Whitney Raynolds",
    role: "Developer",
    photo: "https://www.reshaped.so/img/examples/avatar-1.png",
  },
];

export default function Demo() {
  const [value, setValue] = React.useState("");
  const [selectedItem, setSelectedItem] = React.useState("");
  const handleChange: AutocompleteProps["onChange"] = (args) =>
    setValue(args.value);
  const handleItemSelect: AutocompleteProps["onItemSelect"] = (args) => {
    setSelectedItem(args.value);
    setValue("");
  };

  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 400, width: "100%", margin: "0 auto", padding: 24 }}>
        <Autocomplete
          name="people"
          placeholder="Pick assignee"
          value={value}
          onChange={handleChange}
          onItemSelect={handleItemSelect}
          startSlot={selectedItem && <Badge>{selectedItem}</Badge>}
        >
          {options.map((option) => {
            const valueMatch = value.toLowerCase();
            const optionValue = option.title.toLowerCase();
            if (!optionValue.includes(valueMatch) || valueMatch === optionValue)
              return;
            return (
              <Autocomplete.Item
                key={option.title}
                value={option.title}
                startSlot={<Avatar src={option.photo} size={7} />}
                endSlot={<Badge>{option.role}</Badge>}
              >
                {option.title}
              </Autocomplete.Item>
            );
          })}
        </Autocomplete>
      </div>
    </Reshaped>
  );
}