Refactor App structure and add modular components

Split GamePickerCard, HelpModal, and SheetSection into separate components for better modularity and clarity. Refactored App.jsx to utilize these new components, restructured state variables, and organized functions for improved readability. Enhanced code comments for easier maintenance.
2026-02-04 08:58:00 +01:00
parent 1afb060bbc
commit 3b628b6c57
4 changed files with 360 additions and 19 deletions
@@ -0,0 +1,36 @@
+// src/components/GamePickerCard.jsx
+import React from "react";
+import { styles } from "../styles/styles";
+
+export default function GamePickerCard({
+  games,
+  gameId,
+  setGameId,
+  onOpenHelp,
+}) {
+  return (
+    <div style={{ marginTop: 14 }}>
+      <div style={styles.card}>
+        <div style={styles.sectionHeader}>Spiel</div>
+
+        <div style={styles.cardBody}>
+          <select
+            value={gameId || ""}
+            onChange={(e) => setGameId(e.target.value)}
+            style={{ ...styles.input, flex: 1 }}
+          >
+            {games.map((g) => (
+              <option key={g.id} value={g.id}>
+                {g.name}
+              </option>
+            ))}
+          </select>
+
+          <button onClick={onOpenHelp} style={styles.helpBtn} title="Hilfe">
+            Hilfe
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}