Initial commit: Hördle Web App

components/GuessInput.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface Song {
+    id: number;
+    title: string;
+    artist: string;
+}
+
+interface GuessInputProps {
+    onGuess: (song: Song) => void;
+    disabled: boolean;
+}
+
+export default function GuessInput({ onGuess, disabled }: GuessInputProps) {
+    const [query, setQuery] = useState('');
+    const [songs, setSongs] = useState<Song[]>([]);
+    const [filteredSongs, setFilteredSongs] = useState<Song[]>([]);
+    const [isOpen, setIsOpen] = useState(false);
+
+    useEffect(() => {
+        fetch('/api/songs')
+            .then(res => res.json())
+            .then(data => setSongs(data));
+    }, []);
+
+    useEffect(() => {
+        if (query.length > 1) {
+            const lower = query.toLowerCase();
+            const filtered = songs.filter(s =>
+                s.title.toLowerCase().includes(lower) ||
+                s.artist.toLowerCase().includes(lower)
+            );
+            setFilteredSongs(filtered);
+            setIsOpen(true);
+        } else {
+            setFilteredSongs([]);
+            setIsOpen(false);
+        }
+    }, [query, songs]);
+
+    const handleSelect = (song: Song) => {
+        onGuess(song);
+        setQuery('');
+        setIsOpen(false);
+    };
+
+    return (
+        <div className="input-container">
+            <input
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                disabled={disabled}
+                placeholder={disabled ? "Game Over" : "Know it? Search for the artist / title"}
+                className="guess-input"
+            />
+
+            {isOpen && filteredSongs.length > 0 && (
+                <ul className="suggestions-list">
+                    {filteredSongs.map(song => (
+                        <li
+                            key={song.id}
+                            onClick={() => handleSelect(song)}
+                            className="suggestion-item"
+                        >
+                            <div className="suggestion-title">{song.title}</div>
+                            <div className="suggestion-artist">{song.artist}</div>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}