# 🪪 VersionInfoModal.js Das `VersionInfoModal` ist ein modales Fenster zur Anzeige von Unternehmensinformationen und der aktuellen App-Version. Es wird meist im Footer oder als Info-Schaltfläche in der Benutzeroberfläche eingeblendet. --- ![VersionInfoModal](../../screenshots/VersionInfoModal.png) --- ## 🔧 Pfad ```bash /components/uiWidgets/VersionInfoModal.js ``` --- ## 🎯 Zweck Die Komponente informiert Nutzer über: - Die **aktuelle TALAS.Map Version** - Die **Firmenadresse und Kontaktdaten** der Littwin Systemtechnik GmbH & Co. KG - Eine zentral platzierte Grafik mit dem TALAS-Logo - Eine Schaltfläche zum Schließen des Modals ![VersionInfoModal](../../screenshots/VersionInfoModal2.png) --- ## ⚙️ Props | Prop | Typ | Beschreibung | | ----------------------- | ---------- | ------------------------------------------------------------------------------------------- | | `showVersionInfoModal` | `boolean` | Steuert, ob das Modal angezeigt wird | | `closeVersionInfoModal` | `function` | Callback zum Schließen des Modals | | `APP_VERSION` | `string` | Versionstext (z. B. `1.1.188`), meist aus `.env.production` oder `.env.development` geladen | --- ## 💡 Verhalten - Wird `showVersionInfoModal` auf `true` gesetzt, erscheint das Modal zentriert über einem halbtransparenten Overlay - Klick auf den Hintergrund (schwarzes Overlay) oder auf „Schließen“ führt `closeVersionInfoModal()` aus --- ## 🎨 Gestaltung - Modal-Layout mit Tailwind CSS (`fixed`, `z-50`, `bg-white`, `rounded`, `shadow`) - Schaltfläche `Schließen` reagiert auf Hover mit Farbwechsel (`hover:bg-blue-700`) - Design folgt der UI-Ästhetik von TALAS.web --- ## 🧪 Testfälle | Bedingung | Erwartung | | ------------------------------- | ----------------------------------------- | | `showVersionInfoModal = true` | Modal wird angezeigt | | Klick auf Hintergrund | Modal wird geschlossen | | Klick auf „Schließen“-Button | Modal wird geschlossen | | Version `APP_VERSION = 1.1.290` | Text „TALAS.Map Version 1.1.290“ sichtbar | --- ## 📦 Verknüpfte Dateien - `.env.production` oder `.env.development` enthält z. B. `NEXT_PUBLIC_APP_VERSION=1.1.188` - Aufruf in `Footer` oder `Layout` zur Anzeige bei Klick auf „Version“ --- ## 🛠 Verbesserungsideen - ESC-Taste als Schließen-Funktion ergänzen - Automatischer Import von Version via `process.env.NEXT_PUBLIC_APP_VERSION` --- [Zurück zur Übersicht](../../README.md)