Search Bar

"use client";

import {SearchBar} from "@brynlabs/fusion-ui";
import {useSearch} from "@brynlabs/fusion-ui/dist/hooks/use-search";

const exampleData = [
  "Apple",
  "Banana",
  "Orange",
  "Pear",
  "Strawberry",
  "Grape",
  "Mango",
  "Lemon",
  "Watermelon",
  "Pineapple",
  "Cherry",
  "Peach",
  "Papaya",
];

export const SearchBarExample = () => {
  const {query, setQuery, filteredData} = useSearch(exampleData, {
    showAllOnEmpty: true,
  });

  return (
    <>
      <div style={{width: "100%", height: "65px", border: "1px solid lightgray"}}>
        <SearchBar value={query || ""} onSearch={setQuery} />
      </div>
      <ul style={{marginTop: "20px"}}>
        {filteredData.map(fruit => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </>
  );
};