76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
//Test
|
|
export default function SolutionsPage({ mode, onBack }) {
|
|
const [questions, setQuestions] = useState([]);
|
|
const [search, setSearch] = useState("");
|
|
|
|
useEffect(() => {
|
|
fetch(`/api/questions/${mode}`)
|
|
.then((res) => res.json())
|
|
.then(setQuestions);
|
|
}, [mode]);
|
|
|
|
const filtered = questions.filter((q) => {
|
|
const query = search.toLowerCase();
|
|
return (
|
|
q.frage.toLowerCase().includes(query) ||
|
|
q.antworten.some((a) => a.text.toLowerCase().includes(query))
|
|
);
|
|
});
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-4">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h1 className="text-xl font-bold">Lösungen ({mode.toUpperCase()}-Modus)</h1>
|
|
<button onClick={onBack} className="text-blue-600 underline text-sm">
|
|
Zurück
|
|
</button>
|
|
</div>
|
|
|
|
{/* Suchfeld mit X-Button */}
|
|
<div className="relative mb-6">
|
|
<input
|
|
type="text"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Frage oder Antwort durchsuchen..."
|
|
className="w-full px-4 py-2 pr-10 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
{search && (
|
|
<button
|
|
onClick={() => setSearch("")}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-800"
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{filtered.length === 0 && (
|
|
<p className="text-gray-500">Keine passenden Fragen gefunden.</p>
|
|
)}
|
|
|
|
<div className="space-y-6">
|
|
{filtered.map((frage, idx) => (
|
|
<div key={idx} className="border rounded-lg p-4 shadow-sm bg-white">
|
|
<p className="font-semibold mb-2">
|
|
{idx + 1}. {frage.frage}
|
|
</p>
|
|
<ul className="list-disc list-inside space-y-1">
|
|
{frage.antworten.map((antwort, aidx) => (
|
|
<li
|
|
key={aidx}
|
|
className={antwort.korrekt ? "text-green-600 font-semibold" : ""}
|
|
>
|
|
{antwort.text}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|