mrcwlnd/SchiriTrainer2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed darmode

Browse Source
This commit is contained in:
MarcWieland 2025-07-26 12:22:21 +02:00
parent 9d9eed3a70
commit c25260fb5e
1 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/pages/SolutionsPage.tsx
View File

@ -1,6 +1,5 @@
import { useEffect, useState } from "react";
//Test
export default function SolutionsPage({ mode, onBack }) {
const [questions, setQuestions] = useState([]);
const [search, setSearch] = useState("");
@ -20,10 +19,15 @@ const [questions, setQuestions] = useState([]);
});
return (
<div className="max-w-4xl mx-auto p-4">
<div className="max-w-4xl mx-auto p-4 text-gray-900 dark:text-white">
<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">
<h1 className="text-xl font-bold">
Lösungen ({mode.toUpperCase()}-Modus)
</h1>
<button
onClick={onBack}
className="text-blue-600 dark:text-blue-400 underline text-sm"
>
Zurück
</button>
</div>
@ -35,12 +39,12 @@ const [questions, setQuestions] = useState([]);
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"
className="w-full px-4 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 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"
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"
>
✕
</button>
@ -48,12 +52,17 @@ const [questions, setQuestions] = useState([]);
</div>
{filtered.length === 0 && (
<p className="text-gray-500">Keine passenden Fragen gefunden.</p>
<p className="text-gray-500 dark:text-gray-400">
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">
<div
key={idx}
className="border border-gray-300 dark:border-gray-600 rounded-lg p-4 shadow-sm bg-white dark:bg-gray-900"
>
<p className="font-semibold mb-2">
{idx + 1}. {frage.frage}
</p>
@ -61,7 +70,11 @@ const [questions, setQuestions] = useState([]);
{frage.antworten.map((antwort, aidx) => (
<li
key={aidx}
className={antwort.korrekt ? "text-green-600 font-semibold" : ""}
className={
antwort.korrekt
? "text-green-600 dark:text-green-400 font-semibold"
: ""
}
>
{antwort.text}
</li>