Reshaped Autocomplete

import { Badge, Reshaped, View } from "reshaped/bundle";
import Autocomplete from "@/components/ui/reshaped-autocomplete";

export default function Demo() {
  const options = ["Salad", "Quinoa", "Beans"];

  return (
    <Reshaped theme="slate">
      <div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <View width="280px">
          <Autocomplete
            name="food"
            placeholder="Pick your favorite food"
            startSlot={[
              <Badge size="small" key="cinnamon">Cinnamon bun</Badge>,
              <Badge size="small" key="pasta">Pasta</Badge>,
              <Badge size="small" key="ice-cream">Ice-cream</Badge>,
              <Badge size="small" key="pizza">Pizza</Badge>,
            ]}
            defaultValue="Pineapple"
            multiline
          >
            {options.map((option) => {
              return (
                <Autocomplete.Item key={option} value={option}>
                  {option}
                </Autocomplete.Item>
              );
            })}
          </Autocomplete>
        </View>
      </div>
    </Reshaped>
  );
}