Add missing example sections

Author: AuroraLS3

Plan/react/dashboard/src/components/theme/ExampleSection.jsx

@@ -20,6 +20,8 @@ import {addToObject} from "../../util/mutator.js";
 import {graphUseCases} from "./usecase/GraphUseCases.jsx";
 import {TableUseCase} from "./usecase/TableUseCases.jsx";
 import {formatLabel} from "./UseCase.jsx";
+import TabsUseCase from "./usecase/TabsUseCase.jsx";
+import DataPluginsUseCase from "./usecase/DataPluginsUseCase.jsx";
 
 const findExample = (path, examples) => {
     if (!path?.length) return undefined;
@@ -34,6 +36,7 @@ const ExampleSection = ({displayedItem, className}) => {
         "sidebar": <SidebarUseCase/>,
         "layout.background": <SidebarUseCase/>,
         "layout.title": <SidebarUseCase/>,
+        "tabs": <TabsUseCase/>,
         "infoBox": <InfoBoxUseCase/>,
         "layout.loader": <ChartLoader/>,
         "data.trend": <TrendUseCase/>,
@@ -51,7 +54,8 @@ const ExampleSection = ({displayedItem, className}) => {
         "data.playerVersus": <DataPlayerVersusUseCase/>,
         "data.playerStatus": <DataPlayerStatusUseCase/>,
         "forms": <FormsUseCase/>,
-        "tables": <TableUseCase/>
+        "tables": <TableUseCase/>,
+        "plugin": <DataPluginsUseCase/>
     }
     addToObject(examples, graphUseCases);
     const example = findExample(displayedItem, examples);

Plan/react/dashboard/src/components/theme/usecase/DataPluginsUseCase.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {Card, Col, Row} from "react-bootstrap";
+import DataUseCase from "./DataUseCase.jsx";
+import {faCircle} from "@fortawesome/free-solid-svg-icons";
+
+const DataPluginsUseCase = () => {
+    return (
+        <Row className={'justify-content-center'}>
+            <Col xs={6}>
+                <Card>
+                    <Card.Body>
+                        <DataUseCase label={"plugin-red"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-pink"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-purple"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-deep-purple"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-indigo"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-blue"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-light-blue"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-cyan"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-teal"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-green"} icon={faCircle}/>
+                    </Card.Body>
+                </Card>
+            </Col>
+            <Col xs={6}>
+                <Card>
+                    <Card.Body>
+                        <DataUseCase label={"plugin-light-green"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-lime"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-yellow"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-amber"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-orange"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-deep-orange"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-brown"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-grey"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-blue-grey"} icon={faCircle}/>
+                        <DataUseCase label={"plugin-black"} icon={faCircle}/>
+                    </Card.Body>
+                </Card>
+            </Col>
+        </Row>
+    )
+};
+
+export default DataPluginsUseCase

Plan/react/dashboard/src/components/theme/usecase/TabsUseCase.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {faBraille, faChartArea, faUser} from "@fortawesome/free-solid-svg-icons";
+import {faCalendar} from "@fortawesome/free-regular-svg-icons";
+import {Card} from "react-bootstrap";
+import CardTabs from "../../CardTabs.jsx";
+import {useTranslation} from "react-i18next";
+import Datapoint from "../../Datapoint.jsx";
+
+const Body = () => {
+    return (
+        <Card.Body>
+            <Datapoint name={"Example"} value={1234} icon={faUser}/>
+            <hr/>
+            <Datapoint name={"Example"} value={1234} icon={faUser}/>
+        </Card.Body>
+    )
+}
+
+const TabsUseCase = () => {
+    const {t} = useTranslation();
+    const tabs = [
+        {
+            name: t('html.label.dayByDay'), icon: faChartArea, color: 'players-unique', href: '1',
+            element: <Body/>,
+        }, {
+            name: t('html.label.hourByHour'), icon: faChartArea, color: 'players-unique', href: '2',
+            element: <Body/>,
+        }, {
+            name: t('html.label.serverCalendar'), icon: faCalendar, color: 'sessions', href: '3',
+            element: <Body/>,
+        }, {
+            name: t('html.label.punchcard30days'), icon: faBraille, color: 'text', href: '4',
+            element: <Body/>,
+        },
+    ];
+    return <Card id={"online-activity-graphs"}>
+        <CardTabs tabs={tabs}/>
+    </Card>
+};
+
+export default TabsUseCase