@@ -95,39 +95,40 @@ Für das Föderale Entwicklungsportal wurden leistungsfähige, wiederverwendbare
## components
-**Badge.tsx**: Stellt ein Abzeichen ([`Badge`](components/Badge.tsx:106)) mit Symbol und Text dar, das mit Tailwind-Farbklassen angepasst und optional als Link konfiguriert werden kann.
-**Chip.tsx**: Eine einfache Komponente ([`default`](components/Chip.tsx:6)) zur Darstellung eines stilisierten Textchips mit anpassbarem Aussehen.
-**Favicon.tsx**: Fügt ein Favicon-Link ([`default`](components/Favicon.tsx:3)) zum Dokument-Header hinzu, wobei der Basispfad dynamisch ermittelt wird.
-**FilterAccordion.tsx**: Erzeugt eine Akkordeon-Benutzeroberfläche für Filter ([`FilterAccordion`](components/FilterAccordion.tsx:10)) mit ein- und ausklappbaren Abschnitten und einem Zurücksetzen-Button.
-**FilterLabel.tsx**: Ein Wrapper um die Label-Komponente ([`FilterLabel`](components/FilterLabel.tsx:16)), der Filterpillen-Funktionalität mit aktiven/inaktiven Zuständen hinzufügt.
-**FlexFilter.tsx**: Eine komplexe Komponente ([`FlexFilter`](components/FlexFilter.tsx:258)) zur Datenfilterung mit Checkboxen und Suchfunktion, die den Filterzustand in URL-Parametern speichert.
Aufgrund ihrer Komplexität ist die [`FlexFilter`](components/FlexFilter.tsx:258)-Komponente in separaten Dokumentationen beschrieben;
-**Badge.tsx**: Stellt ein Abzeichen (`Badge`) mit Symbol und Text dar, das mit Tailwind-Farbklassen angepasst und optional als Link konfiguriert werden kann.
-**Chip.tsx**: Eine einfache Komponente zur Darstellung eines stilisierten Textchips mit anpassbarem Aussehen.
-**DomainIcon.tsx**: Eine Komponente zur Anzeige eines Icons für eine bestimmte Domain ([Beschreibung](https://gitlab.opencode.de/fitko/docs/portal/-/wikis/components/DomainIcon)).
-**Favicon.tsx**: Fügt ein Favicon-Link zum Dokument-Header hinzu, wobei der Basispfad dynamisch ermittelt wird.
-**FilterAccordion.tsx**: Erzeugt eine Akkordeon-Benutzeroberfläche für Filter mit ein- und ausklappbaren Abschnitten und einem Zurücksetzen-Button.
-**FilterLabel.tsx**: Ein Wrapper um die Label-Komponente, der Filterpillen-Funktionalität mit aktiven/inaktiven Zuständen hinzufügt.
-**FlexFilter.tsx**: Eine komplexe Komponente zur Datenfilterung mit Checkboxen und Suchfunktion, die den Filterzustand in URL-Parametern speichert.
Aufgrund ihrer Komplexität ist die `FlexFilter`-Komponente in separaten Dokumentationen beschrieben;
-**IconRenderer.tsx**: Rendert verschiedene Arten von Icons ([`IconRenderer`](components/IconRenderer.tsx:19)) (Tabler-Icons) mit anpassbaren Eigenschaften.
-**Label.tsx**: Stellt ein Textlabel ([`Label`](components/Label.tsx:94)) dar, das einen Geltungsbereich haben kann (durch '::' getrennt) und ein Icon enthalten kann. Beispiele:\
-**IconRenderer.tsx**: Rendert verschiedene Arten von Icons (Tabler-Icons) mit anpassbaren Eigenschaften.
-**Label.tsx**: Stellt ein Textlabel dar, das einen Geltungsbereich haben kann (durch '::' getrennt) und ein Icon enthalten kann. Beispiele:\
-**LanguageChooser.tsx**: Eine Dropdown-Komponente ([`LanguageChooser`](components/LanguageChooser.tsx:7)) zur Auswahl der Website-Sprache.
-**layout.tsx**: Die Haupt-Layout-Komponente ([`Layout`](components/layout.tsx:9)), die den Anwendungsinhalt mit Navigationsheader, Sucheingabe und Fußzeile umschließt.
-**ListSort.tsx**: Eine Komponente ([`ListSort`](components/ListSort.tsx:156)) zum Sortieren von Datenlisten mit konfigurierbaren Sortieroptionen.
-**Pagination.tsx**: Verwaltet die Seitennavigation ([`Pagination`](components/Pagination.tsx:70)) mit Seitenwechsel und Auswahl der Elemente pro Seite.
-**RenderIcon.tsx**: Eine flexible Komponente ([`RenderIcon`](components/RenderIcon.tsx:37)) zum Rendern verschiedener Icon-Typen (Tabler-Icons, SVG-Inhalte oder Bilder).
-**ResourceCard.tsx**: Zeigt detaillierte Informationen über eine Ressource ([`default`](components/ResourceCard.tsx:36)) mit Titel, Beschreibung, Logo und untergeordneten Ressourcen an.
-**ScrollToTopButton.tsx**: Eine Schaltfläche ([`ScrollToTopButton`](components/ScrollToTopButton.tsx:19)), die beim Scrollen nach unten erscheint und es ermöglicht, zum Seitenanfang zurückzukehren.
-**SearchInput.tsx**: Ein Sucheingabefeld ([`SearchInput`](components/SearchInput.tsx:69)) mit automatischen Vorschlägen, das Fuse.js für unscharfe Suche verwendet.
-**SearchResultItem.tsx**: Stellt ein einzelnes Suchergebnis ([`SearchResultItem`](components/SearchResultItem.tsx:105)) mit Name, Typ, Beschreibung und Link dar.
-**ServiceTag.tsx**: Rendert ein Tag für Dienste ([`default`](components/ServiceTag.tsx:11)) mit entsprechender Stilisierung basierend auf dem Tag-Typ.
-**LanguageChooser.tsx**: Eine Dropdown-Komponente zur Auswahl der Website-Sprache.
-**layout.tsx**: Die Haupt-Layout-Komponente, die den Anwendungsinhalt mit Navigationsheader, Sucheingabe und Fußzeile umschließt.
-**ListSort.tsx**: Eine Komponente zum Sortieren von Datenlisten mit konfigurierbaren Sortieroptionen.
-**Pagination.tsx**: Verwaltet die Seitennavigation mit Seitenwechsel und Auswahl der Elemente pro Seite.
-**RenderIcon.tsx**: Eine flexible Komponente zum Rendern verschiedener Icon-Typen (Tabler-Icons, SVG-Inhalte oder Bilder).
-**ResourceCard.tsx**: Zeigt detaillierte Informationen über eine Ressource mit Titel, Beschreibung, Logo und untergeordneten Ressourcen an.
-**ScrollToTopButton.tsx**: Eine Schaltfläche, die beim Scrollen nach unten erscheint und es ermöglicht, zum Seitenanfang zurückzukehren.
-**SearchInput.tsx**: Ein Sucheingabefeld mit automatischen Vorschlägen, das Fuse.js für unscharfe Suche verwendet.
-**SearchResultItem.tsx**: Stellt ein einzelnes Suchergebnis mit Name, Typ, Beschreibung und Link dar.
-**ServiceTag.tsx**: Rendert ein Tag für Dienste mit entsprechender Stilisierung basierend auf dem Tag-Typ.
## components/fit-standards
-**BreadcrumbNav.tsx**: Eine Navigationskomponente, die den aktuellen Pfad anzeigt ([`default`](components/fit-standards/BreadcrumbNav.tsx:4)) und einen Link zurück zur Übersicht bietet.
-**ContactInformation.tsx**: Erstellt eine Informationsbox ([`ContactInformation`](components/fit-standards/ContactInformation.tsx:18)), die Kontaktdetails für verschiedene Rollen eines FIT-Standards wie Initiator, Produktverantwortlicher und Betreiber anzeigt.
-**ContactInfoSingle.tsx**: Rendert einen einzelnen Kontakteintrag ([`ContactInfoSingle`](components/fit-standards/ContactInfoSingle.tsx:26)) mit Details wie Name, E-Mail und Telefon für eine spezifische Rolle im Zusammenhang mit einem FIT-Standard.
-**FinancingInformation.tsx**: Erzeugt eine Informationsbox ([`FinancingInformation`](components/fit-standards/FinancingInformation.tsx:16)) speziell für die Anzeige von Finanzierungsinformationen eines FIT-Standards.
-**InfoBoxes.tsx**: Eine umfassende Komponente, die mehrere Informationsboxen ([`InfoBoxes`](components/fit-standards/InfoBoxes.tsx:49)) für einen FIT-Standard rendert, einschließlich Kontaktinformationen, Support-Links, Artefakte, verbundene Standards, Framework, Gültigkeit und letztes Update.
-**LifecyclePicture.tsx**: Zeigt ein Bild an ([`default`](components/fit-standards/LifecyclePicture.tsx:11)), das die aktuelle Lebenszyklusphase eines FIT-Standards repräsentiert.
-**PageHeaderCard.tsx**: Rendert den Kopfbereich einer FIT-Standard-Seite ([`default`](components/fit-standards/PageHeaderCard.tsx:22)), einschließlich Titel, Beschreibung, Lebenszyklusphase und Kontext-Labels.
-**BreadcrumbNav.tsx**: Eine Navigationskomponente, die den aktuellen Pfad anzeigt und einen Link zurück zur Übersicht bietet.
-**ContactInformation.tsx**: Erstellt eine Informationsbox, die Kontaktdetails für verschiedene Rollen eines FIT-Standards wie Initiator, Produktverantwortlicher und Betreiber anzeigt.
-**ContactInfoSingle.tsx**: Rendert einen einzelnen Kontakteintrag mit Details wie Name, E-Mail und Telefon für eine spezifische Rolle im Zusammenhang mit einem FIT-Standard.
-**FinancingInformation.tsx**: Erzeugt eine Informationsbox speziell für die Anzeige von Finanzierungsinformationen eines FIT-Standards.
-**InfoBoxes.tsx**: Eine umfassende Komponente, die mehrere Informationsboxen für einen FIT-Standard rendert, einschließlich Kontaktinformationen, Support-Links, Artefakte, verbundene Standards, Framework, Gültigkeit und letztes Update.
-**LifecyclePicture.tsx**: Zeigt ein Bild an, das die aktuelle Lebenszyklusphase eines FIT-Standards repräsentiert.
-**PageHeaderCard.tsx**: Rendert den Kopfbereich einer FIT-Standard-Seite, einschließlich Titel, Beschreibung, Lebenszyklusphase und Kontext-Labels.
