typescript-overlay-essentials 1.0.0

package/MultipleChoiceOverlay.tsx

@@ -0,0 +1,170 @@
+import { useEffect, useState, CSSProperties } from 'react';
+import './MultipleChoiceOverlay.css';
+
+
+// Um das MultipleChoiceOverlay zu nutzen, muss der State die folgende Struktur haben:
+export interface MultipleChoiceOverlayState {
+    headline?: string | undefined;
+    message?: string | undefined;
+    choices: string[] | [];
+    preInput?: string[] | undefined;
+    cancelButtonText?: string | undefined;
+    proceedButtonText?: string | undefined;
+    handlerOk?: ((userInput: string[], args?: unknown) => void) | undefined;
+    handlerCancel?: ((args?: unknown) => void) | undefined;
+    handlerArgs?: unknown;
+    addCloseButton?: boolean | undefined;
+    proceedButtonStyle?: CSSProperties | undefined;
+    cancelButtonStyle?: CSSProperties | undefined;
+}
+
+// Der standard MultipleChoiceOverlay Status, der zur Initialisierung genutzt werden kann
+export const defaultMultipleChoiceState: MultipleChoiceOverlayState = {
+    headline: undefined,
+    message: undefined,
+    choices: [],
+    preInput: undefined,
+    cancelButtonText: undefined,
+    proceedButtonText: undefined,
+    handlerOk: undefined,
+    handlerCancel: undefined,
+    handlerArgs: undefined,
+    addCloseButton: false,
+    proceedButtonStyle: undefined,
+    cancelButtonStyle: undefined,
+};
+
+// Wobei alle Attribute grundsätzlich optional sind:
+// - headline: ist die Überschrift und wird fett hinterlegt
+// - message: ist die angezeigte Nachricht
+// - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
+// - preInput: Ein String-Array: Die Einträge sind stadardmäßig ausgewählt alle anderen nicht ausgewählt
+// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
+// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
+// - handlerOk: ist die Funktion die bei Bestätigung des Inputs ausgeführt wird (Struktur: handlerOk(userInput, handlerArgs)
+// - handlerCancel: ist die Funktion die bei Ablehnung des Inputs ausgeführt wird (Struktur: handlerCancel(handlerArgs)
+// - handlerArgs: kann im handler als Argumente genutzt werden
+// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
+// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
+// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
+
+// Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
+// Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
+export function MultipleChoiceOverlay({ state, setState }: { state: MultipleChoiceOverlayState, setState: (state: MultipleChoiceOverlayState) => void }): React.ReactElement {
+
+    // Wird verwendet um das Infoverlay ein- und auszublenden
+    const [showOverlay, setShowOverlay] = useState(false);
+
+    // Wird verwendet um die ausgewählten Choices aktuell zu halten
+    const [input, setInput] = useState<string[]>([]);
+
+    // Sobald der State von außen aktualisiert wird triggert diese Funktion
+    // Die setzt showOverlay auf true
+    useEffect(() => {
+        if (state?.message != null || state?.headline != null) {
+            setInput(state?.preInput != null ? state.preInput : []);
+            setShowOverlay(true);
+            setTimeout(() => { document.getElementById("confirmButton")?.focus(); }, 1);
+        }
+    }, [state]);
+
+    // Toggled die Auswahl eines Choices
+    // Setzt dafür den aktuellen Input auf den neuen Input + Choice
+    const toggle = (choice : string) : void => {
+        if (input.includes(choice)) {
+            setInput(input.filter(item => item !== choice)); // Entfernt den Choice wenn er schon ausgewählt ist
+        }
+        else {
+            setInput([...input, choice]); // Fügt den Choice hinzu wenn er noch nicht ausgewählt ist
+        }
+    }
+
+    const handleAction = (
+        handler: ((args?: unknown) => void) | ((userInput: string[], args?: unknown) => void) | undefined,
+        useInput: boolean
+    ): void => {
+        setShowOverlay(false);
+        var tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultMultipleChoiceState);
+        if (typeof tempState.handler === 'function' && useInput)
+            (tempState.handler as ((userInput: string[], args?: unknown) => void))(input, tempState.handlerArgs);
+        else if (typeof tempState.handler === 'function')
+            (tempState.handler as ((args?: unknown) => void))(tempState.handlerArgs);
+    }
+
+    return showOverlay ?
+        <div className="multiplechoice-overlay">
+            <div className="multiplechoice-box">
+                {state.addCloseButton?
+                    <span className="closeButton">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            tabIndex={0}
+                            className="close-icon"
+                            onClick={() => handleAction(undefined, false)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault(); // Verhindert Scroll bei Space
+                                    handleAction(undefined, false);
+                                }
+                            }}
+                            role="button" aria-label="Dialog schließen"
+                            width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </span> : 
+                <></>}
+                <p className="headline" id="theHeadline" tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline != null ? state.headline : ""}</strong></p>
+                <p tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message != null ? state.message : ""}</p>
+                <div className="choices-input">
+                    <div className="choices-container">
+                        {state?.choices.map(choice => (
+                            <label className="choice-label" key={choice}>
+                                <input
+                                    type="checkbox"
+                                    checked={input.includes(choice)}
+                                    onChange={() => toggle(choice)}
+                                    tabIndex={0}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault(); // Verhindert Scroll bei Space
+                                            toggle(choice);
+                                        }
+                                    }}
+                                />
+                                {choice}
+                            </label>
+                        ))}
+                    </div>
+                </div>
+                <div className="information-buttons">
+                    <button onClick={() => handleAction(state.handlerCancel, false)}
+                        onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === ' ') {
+                                event.preventDefault(); // Verhindert Scroll bei Space
+                                handleAction(state.handlerCancel, false);
+                            }
+                        }}
+                        className="px-4 py-2 bg-gray-300 rounded"
+                        style={state?.cancelButtonStyle != null ? state.cancelButtonStyle : {}}>
+                        {state?.cancelButtonText != null ? state.cancelButtonText : "Abbrechen"}
+                    </button>
+                    <button onClick={() => handleAction(state.handlerOk, true)}
+                        id="confirmButton"
+                        onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === ' ') {
+                                event.preventDefault(); // Verhindert Scroll bei Space
+                                handleAction(state.handlerOk, true);
+                            }
+                        }}
+                        className="px-4 py-2 bg-blue-600 text-white rounded"
+                        style={state?.proceedButtonStyle != null ? state.proceedButtonStyle : {}}>
+                        {state?.proceedButtonText != null ? state.proceedButtonText : "OK"}
+                    </button>
+                </div>
+            </div>
+        </div> : <></>;
+}

package/MultipleRadioOverlay.css

@@ -0,0 +1,170 @@
+.multipleradio-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+}
+
+.multipleradio-box {
+    background-color: var(--Hellgrau, white);
+    color: var(--HellSchwarz,#2c2c2c);
+    padding: 2rem;
+    border-radius: 12px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+    max-width: 500px;
+    width: 90%;
+    text-align: center;
+    animation: fadeIn 0.3s ease-in-out;
+    white-space: pre-line;
+    position: relative;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.multipleradio-box .headline {
+    margin-bottom: 0.75em;
+}
+
+.multipleradio-box .information-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+    .multipleradio-box .information-buttons button {
+        font-size: 85%;
+        padding: 0.5rem 1.1rem;
+    }
+
+/* === Stylisierte Checkbox === */
+.multipleradio-box .radios-input {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.multipleradio-box .radios-input input[type="checkbox"] {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid white;
+    background-color: var(--FastWeiß, white); 
+    border-color: var(--Mittelgrau, #ccc);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+    position: relative;
+    margin-right: 0.5rem;
+}
+
+    .multipleradio-box .radios-input input[type="checkbox"]:checked {
+        background-color: var(--DunkelAkzent, #4aabf5) ;
+        border-color: var(--DunkelAkzent, #4aabf5) ;
+    }
+
+        .multipleradio-box .radios-input input[type="checkbox"]:hover {
+            background-color: var(--Hellgrau, #ddd); 
+            border-color: var(--Dunkelgrau, #999);
+        }
+
+        .multipleradio-box .radios-input input[type="checkbox"]:checked:hover {
+            background-color: var(--HSDAkzent, #4aabf5) ;
+            border-color: var(--HSDAkzent, #4aabf5) ;
+        }
+
+
+        /* Häkchen aus zwei Linien */
+        .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
+            content: "";
+            position: absolute;
+            left: 5px;
+            top: 2px;
+            width: 5px;
+            height: 10px;
+            border: solid white;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+        }
+
+    .multipleradio-box .radios-input input[type="checkbox"]:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--MittelAkzent, rgba(74, 171, 245));
+    }
+
+.multipleradio-box .radio-label {
+    justify-content: flex-start;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    vertical-align: middle;
+}
+
+.multipleradio-box .radios-container{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    width: max-content;
+    padding: 1rem;
+}
+
+/* Light Mode */
+@media (prefers-color-scheme: dark) {
+    
+    .multipleradio-box {
+        background-color: var(--HellSchwarz,#2c2c2c);
+        color: var(--FastWeiß, white);
+    }
+
+    .multipleradio-box .radios-input input[type="checkbox"] {
+        background-color: var(--Dunkelgrau, #888);
+        background-color: var(--FastSchwarz,#222);
+    }
+
+        .multipleradio-box .radios-input input[type="checkbox"]:checked {
+            background-color: var(--DunkelAkzent, #4aabf5);
+            border-color: var(--DunkelAkzent, #4aabf5);
+        }
+
+        .multipleradio-box .radios-input input[type="checkbox"]:hover {
+            background-color: var(--Dunkelgrau, #ddd); 
+            border-color: var(--Hellgrau, #999);
+        }
+
+        .multipleradio-box .radios-input input[type="checkbox"]:checked:hover {
+            background-color: var(--HSDAkzent, #4aabf5) ;
+            border-color: var(--HSDAkzent, #4aabf5) ;
+        }
+
+            .multipleradio-box .radios-input input[type="checkbox"]:checked::after {
+                border-color: white;
+            }
+}
+
+.multipleradio-box .closeButton {
+    right: 10px;
+    top: 10px;
+    position: absolute;
+}
+
+    .multipleradio-box .close-icon:hover {
+        color: var(--HSDAkzent);
+        cursor: pointer;
+    }

package/MultipleRadioOverlay.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useState, CSSProperties } from 'react';
+import './MultipleRadioOverlay.css';
+
+
+// Um das MultipleRadioOverlay zu nutzen, muss der State die folgende Struktur haben:
+export interface MultipleRadioOverlayState {
+    headline?: string | undefined;
+    message?: string | undefined;
+    choices: string[] | [];
+    preInput?: string | undefined;
+    cancelButtonText?: string | undefined;
+    proceedButtonText?: string | undefined;
+    handlerOk?: ((userInput: string, args?: unknown) => void) | undefined;
+    handlerCancel?: ((args?: unknown) => void) | undefined;
+    handlerArgs?: unknown;
+    addCloseButton?: boolean | undefined;
+    proceedButtonStyle?: CSSProperties | undefined;
+    cancelButtonStyle?: CSSProperties | undefined;
+}
+
+// Um das MultipleRadioOverlay zu nutzen, muss der State die folgende Struktur haben:
+export const defaultMultipleRadioState: MultipleRadioOverlayState = {
+    headline: undefined,
+    message: undefined,
+    choices: [],
+    preInput: undefined,
+    cancelButtonText: undefined,
+    proceedButtonText: undefined,
+    handlerOk: undefined,
+    handlerCancel: undefined,
+    handlerArgs: undefined,
+    addCloseButton: false,
+    proceedButtonStyle: undefined,
+    cancelButtonStyle: undefined,
+};
+// Wobei alle Attribute grundsätzlich optional sind:
+// - headline: ist die Überschrift und wird fett hinterlegt
+// - message: ist die angezeigte Nachricht
+// - choices: Ein String-Array mit den Optionen die ausgewählt werden können (ohne Angabe gibt es keine Auswahl)
+// - preInput: Ein String: Dieser Eintrag ist stadardmäßig ausgewählt
+// - cancelButtonText: ist der Text der auf dem Cancel Button stehen soll (ohne Angabe wird "Abbrechen" verwendet)
+// - proceedButtonText: ist der Text der auf dem Proceed Button stehen soll (ohne Angabe wird "OK" verwendet)
+// - handlerOk: ist die Funktion die bei Bestätigung des Inputs ausgeführt wird (Struktur: handlerOk(userInput, handlerArgs)
+// - handlerCancel: ist die Funktion die bei Ablehnung des Inputs ausgeführt wird (Struktur: handlerCancel(handlerArgs)
+// - handlerArgs: kann im handler als Argumente genutzt werden
+// - addCloseButton: boolscher Wert, der angibt, ob ein x oben rechts als close-Button verfügbar sein soll (bricht die Aktion ohne handler ab, standardmäßig false)
+// - proceedButtonStyle: ist der Style des Bestätigungsbuttons (Standardmäßig unverändert)
+// - cancelButtonStyle: ist der Style des Abbrechenbuttons (Standardmäßig unverändert)
+
+// Output: Der Input vom User wird am Ende an den handlerOk übergeben (oder bei handlerCancel ignoriert)!
+// Somit wird der handler so aufgerufen: handlerOk(UserInput, handlerArgs) oder handlerCancel(handlerArgs)
+export function MultipleRadioOverlay({ state, setState }: { state: MultipleRadioOverlayState, setState: (state: MultipleRadioOverlayState) => void }): React.ReactElement {
+
+    // Wird verwendet um das Infoverlay ein- und auszublenden
+    const [showOverlay, setShowOverlay] = useState<boolean>(false);
+
+    // Wird verwendet um die ausgewählte Wahl aktuell zu halten
+    const [input, setInput] = useState<string>("");
+
+    // Sobald der State von außen aktualisiert wird triggert diese Funktion
+    // Die setzt showOverlay auf true
+    useEffect(() => {
+        if (state?.message != null || state?.headline != null) {
+            setInput(state?.preInput != null ? state.preInput : "");
+            setShowOverlay(true);
+            setTimeout(() => { document.getElementById("confirmButton")?.focus(); }, 1);
+        }
+    }, [state]);
+
+    const handleAction = (
+        handler: ((args?: unknown) => void) | ((userInput: string, args?: unknown) => void) | undefined,
+        useInput: boolean
+    ): void => {
+        setShowOverlay(false);
+        var tempState = {
+            handler: handler,
+            handlerArgs: state.handlerArgs
+        };
+        setState(defaultMultipleRadioState);
+        if (typeof tempState.handler === 'function' && useInput)
+            (tempState.handler as ((userInput: string, args?: unknown) => void))(input, tempState.handlerArgs);
+        else if (typeof tempState.handler === 'function')
+            (tempState.handler as ((args?: unknown) => void))(tempState.handlerArgs);
+    }
+
+    return showOverlay ?
+        <div className="multipleradio-overlay">
+            <div className="multipleradio-box">
+                {state.addCloseButton?
+                    <span className="closeButton">
+                        <svg xmlns="http://www.w3.org/2000/svg"
+                            tabIndex={0}
+                            className="close-icon"
+                            onClick={() => handleAction(undefined, false)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault(); // Verhindert Scroll bei Space
+                                    handleAction(undefined, false);
+                                }
+                            }}
+                            role="button" aria-label="Dialog schließen"
+                            width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </span> : 
+                <></>}
+                <p className="headline" id = "theHeadline" tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}><strong>{state?.headline != null ? state.headline : ""}</strong></p>
+                <p tabIndex={0} style={{ whiteSpace: "pre-line", wordBreak: "break-word" }}>{state?.message != null ? state.message : ""}</p>
+                <div className="radios-input">
+                    <div className="radios-container">
+                        {state?.choices.map(choice => (
+                            <label className="radio-label" key={choice}>
+                                <input
+                                    type="radio"
+                                    checked={input === choice}
+                                    onChange={() => setInput(choice)}
+                                    tabIndex={0}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault(); // Verhindert Scroll bei Space
+                                            setInput(choice);
+                                        }
+                                    }}
+                                />
+                                {choice}
+                            </label>
+                        ))}
+                    </div>
+                </div>
+                <div className="information-buttons">
+                    <button onClick={() => handleAction(state.handlerCancel, false)}
+                        onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === ' ') {
+                                event.preventDefault(); // Verhindert Scroll bei Space
+                                handleAction(state.handlerCancel, false);
+                            }
+                        }}
+                        className="px-4 py-2 bg-gray-300 rounded"
+                        style={state?.cancelButtonStyle != null ? state.cancelButtonStyle : {}}>
+                        {state?.cancelButtonText != null ? state.cancelButtonText : "Abbrechen"}
+                    </button>
+                    <button onClick={() => handleAction(state.handlerOk, true)}
+                        id="confirmButton"
+                        onKeyDown={(event) => {
+                            if (event.key === "Enter" || event.key === ' ') {
+                                event.preventDefault(); // Verhindert Scroll bei Space
+                                handleAction(state.handlerOk, true);
+                            }
+                        }}
+                        className="px-4 py-2 bg-blue-600 text-white rounded"
+                        style={state?.proceedButtonStyle != null ? state.proceedButtonStyle : {}}>
+                        {state?.proceedButtonText != null ? state.proceedButtonText : "OK"}
+                    </button>
+                </div>
+            </div>
+        </div> : <></>;
+}

package/README.md

@@ -0,0 +1,12 @@
+# typescript-overlay-essentials
+Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet:
+- [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen),
+- [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann,
+- [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat,
+- [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext,
+- [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann,
+- [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann,
+- [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird,
+- [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2),
+- [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat,
+- [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.

package/Toast.css

@@ -0,0 +1,13 @@
+.toast-notification {
+    font-size: 80%;
+    position: fixed;
+    top: 14rem;
+    right: 1rem;
+    background-color: var(--DunkleresGruen, #1a7f37);
+    color: white;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    padding: 0.8rem 1.2rem 0.65rem 1.2rem;
+    border-radius: 8px;
+    animation: fadeInOut 2.5s ease-in-out;
+    z-index: 1000;
+}

package/Toast.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import './Toast.css'
+
+// Zeigt einen kleinen Toast in der oberen rechten Ecke an, der nach 2,5 Sekunden wieder verschwindet
+function Toast({ state, setState }: { state: string, setState: (value: string) => void }) : React.ReactElement {
+    // Wird verwendet um die Toast-Notification ein-/auszublenden
+    const [showToast, setShowToast] = useState(false);
+    // Wird verwendet um den Inhalt der Toast-Notification zu bestimmen
+    const [toastContent, setToastContent] = useState("");
+
+    useEffect(() => {
+        setToastContent(state)
+    }, [state]);
+
+    useEffect(() => {
+        if (toastContent && toastContent !== "") {
+            setShowToast(true);
+            setTimeout(() => { setState(""); }, 2500); // Hinweis nach 2,5 Sekunden wieder ausblenden
+        }
+        else {
+            setShowToast(false);
+        }
+    }, [toastContent, setState]);
+
+    return <>
+        {showToast && (
+            <div className="toast-notification">
+                {toastContent}
+            </div>)}
+    </>
+}
+
+export default Toast;

package/ToggleSwitch.tsx

@@ -0,0 +1,56 @@
+import React, { useRef, useEffect, useState } from "react";
+import "./ToggleSwitch.css";
+
+export interface Option<T> {
+    value: T;
+    label: string;
+}
+
+// Attribute vom ToggleSwitch:
+// - optionLeft: {value: valueLeft, label: labelLeft} Beschreibt die linke Option. valueLeft ist der Wert, der in "value" eingetragen wird und labelLeft, was als Option angezeigt wird.
+// - optionRight: {value: valueLeft, label: labelRight} Beschreibt die rechte Option. valueRight ist der Wert, der in "value" eingetragen wird und labelRight, was als Option angezeigt wird.
+// - value: Der Wert, der ausgewählt angezeigt werden soll (useState)
+// - onChange: Die Funktion die bei Änderung ausgeführt werden soll.
+//             Standardmäßig könnte z.B. {(value) => {value === valueLeft ? setValue(valueLeft) : setValue(valueRight)}} genutzt werden
+
+export function ToggleSwitch<T>({ optionLeft, optionRight, value, onChange } : { optionLeft: Option<T>, optionRight: Option<T>, value: T, onChange: (value: T) => void }) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const optionLeftRef = useRef<HTMLDivElement>(null);
+    const optionRightRef = useRef<HTMLDivElement>(null);
+    const [sliderStyle, setSliderStyle] = useState({});
+
+    useEffect(() => {
+        const el = value === optionLeft.value ? optionLeftRef.current : optionRightRef.current;
+        const container = containerRef.current;
+
+        if (!el || !container) return;
+
+        const { offsetLeft, offsetWidth } = el;
+
+        setSliderStyle({
+            transform: `translateX(calc(${offsetLeft}px - 1rem))`,
+            width: `calc(${offsetWidth}px + 2rem)`
+        });
+    }, [value, optionLeft, optionRight]);
+
+    return (
+        <div className="toggleWrapper" ref={containerRef}>
+            <div
+                className={`toggleOption ${value === optionLeft.value ? "active" : ""}`}
+                ref={el => {optionLeftRef.current = el}}
+                onClick={() => onChange(optionLeft.value)}
+            >
+                {optionLeft.label}
+            </div>
+            <div
+                className={`toggleOption ${value === optionRight.value ? "active" : ""}`}
+                ref={el => {optionRightRef.current = el}}
+                onClick={() => onChange(optionRight.value)}
+            >
+                {optionRight.label}
+            </div>
+
+            <div className={`toggleSlider ${value === optionLeft.value ? "left" : "right"}`} style={sliderStyle}/>
+        </div>
+    );
+}

package/Toggleswitch.css

@@ -0,0 +1,49 @@
+.toggleWrapper {
+    position: relative;
+    display: flex;
+    width: fit-content; 
+    height: 40px;
+    border-radius: 20px;
+    background-color: #f9eeee;;
+    overflow: hidden;
+    cursor: pointer;
+    user-select: none;
+    font-family: sans-serif;
+    font-weight: 500;
+    float: right;
+}
+
+.toggleOption {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+    color: var(--FastSchwarz, black);
+    transition: color 0.2s;
+    margin: 1rem;
+    white-space: nowrap;
+}
+
+.toggleOption.active {
+    color: black;
+}
+
+.toggleSlider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 50%;
+    border-radius: 20px;
+    background-color: var(--HellAkzent, red);
+    transition: transform 0.25s ease;
+    z-index: 1;
+}
+
+.toggleSlider.left {
+    transform: translateX(0%);
+}
+
+.toggleSlider.right {
+    transform: translateX(100%);
+}

package/index.ts

@@ -0,0 +1,8 @@
+export { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from './ConfirmationBox.tsx';
+export { Dropdown, Option } from './Dropdown.tsx';
+export { InfoOverlay, InfoOverlayState, defaultInfoOverlayState } from './InfoOverlay.tsx';
+export { InfoOverlayWithInput, InfoOverlayWithInputState, defaultInformationState } from './InfoOverlayWithInput.tsx';
+export { setInputFilter } from './InputFilter.tsx';
+export { LoadingOverlay, LoadingOverlayState, defaultLoadingOverlayState } from './LoadingOverlay.tsx';
+export { MultipleChoiceOverlay, MultipleChoiceOverlayState, defaultMultipleChoiceState } from './MultipleChoiceOverlay.tsx';
+export { MultipleRadioOverlay, MultipleRadioOverlayState, defaultMultipleRadioState } from './MultipleRadioOverlay.tsx';