React Notizen-Finder

pnpm create vite@latest notes-finder --template react-ts
cd notes-finder
pnpm install

pnpm add @polgubau/fuzzy

export const notes = [
  {id: 1, title: "Nuxt.js üben", content: "Erfahren Sie, wie Sie Nuxt.js für serverseitiges Rendering verwenden."},
  {id: 2, title: "Eine To-Do-App erstellen", content: "Erstellen Sie eine einfache To-Do-App mit React und TypeScript."},
  {id: 3, title: "TypeScript lernen", content: "Verstehen Sie die Grundlagen von TypeScript und seine Funktionen."},
  {id: 4, title: "React Router erkunden", content: "Lernen Sie, wie Sie React Router für die Navigation in React-Anwendungen verwenden."},
  {id: 5, title: "Redux studieren", content: "Verstehen Sie, wie Sie den Zustand mit Redux verwalten."},
 
];

  import { useState } from "react";
  import { Highlight, useFuzzy } from "@polgubau/fuzzy/react";
	import { notes } from "./notes";
 
  const Search: React.FC = () => {
	const [query, setQuery] = useState("");
 
	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setQuery(e.target.value);
	};
 
	const filteredList = useFuzzy({
		list: notes,
		// Wenn `query` leer ist, wird `notes` unverändert zurückgegeben.
		query,
		// `getKey` wird verwendet, um den Schlüssel jedes Elements in der Liste zu extrahieren, das für die Suche verwendet werden soll.
		getKey: (item) => [item.title, item.content],
	});
 
	return (
		<div>
			<input
				className="border-2 border-fd-foreground dark:bg-fd-accent rounded-lg w-full p-2 mb-4"
				type="search"
				value={query}	
				onChange={handleChange}
				placeholder="Notizen suchen..."
			/>
			<ul>
				{filteredList.map(({ item, _score, matches: [nameRanges, contentRanges] }) => (
					<li key={item.id}>
						<h3>
							<Highlight text={item.title} ranges={nameRanges} />
						</h3>
						<p>
							<Highlight text={item.content} ranges={contentRanges} />
						</p>
					</li>
				))}
			</ul>
		</div>
	);
};

  import React from "react";
  import Search from "./Search";
  import "./App.css";
  const App: React.FC = () => {
    return (
      <div className="App">
        <h1>Notizen-Finder</h1>
        <Search />
      </div>
    );
  };
  export default App;