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

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

@ -1,8 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
//Test
export default function SolutionsPage({ mode, onBack }) { export default function SolutionsPage({ mode, onBack }) {
const [questions, setQuestions] = useState([]); const [questions, setQuestions] = useState([]);
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
useEffect(() => { useEffect(() => {
@ -20,10 +19,15 @@ const [questions, setQuestions] = useState([]);
}); });
return ( 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"> <div className="flex justify-between items-center mb-4">
<h1 className="text-xl font-bold">Lösungen ({mode.toUpperCase()}-Modus)</h1> <h1 className="text-xl font-bold">
<button onClick={onBack} className="text-blue-600 underline text-sm"> Lösungen ({mode.toUpperCase()}-Modus)
</h1>
<button
onClick={onBack}
className="text-blue-600 dark:text-blue-400 underline text-sm"
>
Zurück Zurück
</button> </button>
</div> </div>
@ -35,12 +39,12 @@ const [questions, setQuestions] = useState([]);
value={search} value={search}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
placeholder="Frage oder Antwort durchsuchen..." 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 && ( {search && (
<button <button
onClick={() => setSearch("")} 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> </button>
@ -48,12 +52,17 @@ const [questions, setQuestions] = useState([]);
</div> </div>
{filtered.length === 0 && ( {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"> <div className="space-y-6">
{filtered.map((frage, idx) => ( {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"> <p className="font-semibold mb-2">
{idx + 1}. {frage.frage} {idx + 1}. {frage.frage}
</p> </p>
@ -61,7 +70,11 @@ const [questions, setQuestions] = useState([]);
{frage.antworten.map((antwort, aidx) => ( {frage.antworten.map((antwort, aidx) => (
<li <li
key={aidx} key={aidx}
className={antwort.korrekt ? "text-green-600 font-semibold" : ""} className={
antwort.korrekt
? "text-green-600 dark:text-green-400 font-semibold"
: ""
}
> >
{antwort.text} {antwort.text}
</li> </li>