Iconify/react icons in dashboard/page.jsx

LICENSE_ICONIFY.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-PRESENT Vjacheslav Trushkin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/dashboard/page.jsx

@@ -8,6 +8,7 @@ import CPLStatus from "../../components/modulesStatus/CPLStatus";
 import Access1Status from "../../components/modulesStatus/Access1Status";
 import Access2Status from "../../components/modulesStatus/Access2Status";
 import Kue705_FO from "../../components/modulesStatus/Kue705_FO";
+import { Icon } from "@iconify/react";
 
 function Dashboard() {
   const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
@@ -62,14 +63,23 @@ function Dashboard() {
 
   return (
     <div className="bg-gray-100 flex flex-col min-h-screen ">
-      {/* Letzte Meldungen */}
+      {/* Letzte Meldungen - Titel und Icon Bereich */}
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-between items-center pb-2 w-full lg:w-2/3 mt-8">
-        <h1 className="text-xl font-bold text-gray-700">
+        <div className="flex justify-between gap-1 ">
-          Letzten 20 Meldungen
+          <Icon
-        </h1>
+            icon="ri:calendar-schedule-line"
-        <button className="text-red-500 hover:text-red-600">
+            className="text-blue-500 text-4xl"
-          <i className="bi bi-trash"></i>
+          />
-        </button>
+
+          <h1 className="text-xl font-bold text-gray-700">
+            Letzten 20 Meldungen
+          </h1>
+        </div>
+
+        <Icon
+          icon="ph:trash"
+          className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer"
+        />
       </div>
 
       <div className="flex flex-col lg:flex-row gap-8">
@@ -143,8 +153,47 @@ function Dashboard() {
               <Access1Status />
               <Access2Status />
             </div>
-            <div className="flex flex-row item-center justify-between">
+            <div className="flex flex-col item-center justify-between gap-1">
-              <Kue705_FO />
+              <div className="flex flex-row item-center justify-between space-y-0">
+                <Kue705_FO slot="1" />
+                <Kue705_FO slot="2" />
+                <Kue705_FO slot="3" />
+                <Kue705_FO slot="4" />
+                <Kue705_FO slot="5" />
+                <Kue705_FO slot="6" />
+                <Kue705_FO slot="7" />
+                <Kue705_FO slot="8" />
+              </div>
+              <div className="flex flex-row item-center justify-between space-y-0">
+                <Kue705_FO slot="9" />
+                <Kue705_FO slot="10" />
+                <Kue705_FO slot="11" />
+                <Kue705_FO slot="12" />
+                <Kue705_FO slot="13" />
+                <Kue705_FO slot="14" />
+                <Kue705_FO slot="15" />
+                <Kue705_FO slot="16" />
+              </div>
+              <div className="flex flex-row item-center justify-between space-y-0">
+                <Kue705_FO slot="17" />
+                <Kue705_FO slot="18" />
+                <Kue705_FO slot="19" />
+                <Kue705_FO slot="20" />
+                <Kue705_FO slot="21" />
+                <Kue705_FO slot="22" />
+                <Kue705_FO slot="23" />
+                <Kue705_FO slot="24" />
+              </div>
+              <div className="flex flex-row item-center justify-between space-y-0">
+                <Kue705_FO slot="25" />
+                <Kue705_FO slot="26" />
+                <Kue705_FO slot="27" />
+                <Kue705_FO slot="28" />
+                <Kue705_FO slot="29" />
+                <Kue705_FO slot="30" />
+                <Kue705_FO slot="31" />
+                <Kue705_FO slot="32" />
+              </div>
             </div>
           </div>
         </div>

components/modulesStatus/Kue705_FO.jsx

@@ -1,12 +1,14 @@
 // components/Kue705_FO.jsx
 import React from "react";
 
-const Kue705_FO = () => {
+const Kue705_FO = ({ slot }) => {
   return (
-    <div className="border border-gray-400 w-16 h-32 flex flex-col">
+    <div className="border border-gray-400 w-12 h-24 flex flex-col">
       {/* Erstes Kind, nimmt den restlichen Platz ein */}
       <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
-        <div className="flex flex-col justify-start">1</div>
+        <div className="flex w-full p-1 mb-4 items-start justify-start">
+          {slot}
+        </div>
         <div>KÜ705</div>
         <div>FO</div>
       </div>

package-lock.json

@@ -9,6 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
+        "@iconify-icons/ri": "^1.2.10",
+        "@iconify/json": "^2.2.253",
+        "@iconify/react": "^5.0.2",
         "autoprefixer": "^10.4.20",
         "bootstrap-icons": "^1.11.3",
         "next": "14.2.13",
@@ -37,6 +40,42 @@
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz",
       "integrity": "sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg=="
     },
+    "node_modules/@iconify-icons/ri": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@iconify-icons/ri/-/ri-1.2.10.tgz",
+      "integrity": "sha512-wNaXsQYK55WDUWCbcjvnwnODV4Jtsp+VC0duPanibEVu876TUYf6kdgTGtH7/GErBCNdJuJJbncG7vbOaeQi7w==",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/json": {
+      "version": "2.2.253",
+      "resolved": "https://registry.npmjs.org/@iconify/json/-/json-2.2.253.tgz",
+      "integrity": "sha512-lGfG3aaprpO+zg0mP4BJR69ezBG7V/rIyJy/76kWxmJFyKXLhEfdmnlH+wn5D7uOl5CpApTVBbSTrusf7fe0ww==",
+      "dependencies": {
+        "@iconify/types": "*",
+        "pathe": "^1.1.2"
+      }
+    },
+    "node_modules/@iconify/react": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-5.0.2.tgz",
+      "integrity": "sha512-wtmstbYlEbo4NDxFxBJkhkf9gJBDqMGr7FaqLrAUMneRV3Z+fVHLJjOhWbkAF8xDQNFC/wcTYdrWo1lnRhmagQ==",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1150,6 +1189,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",

package.json

@@ -5,11 +5,15 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "cp LICENSE_ICONIFY.txt out/LICENSE_ICONIFY.txt",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.1.0",
+    "@iconify-icons/ri": "^1.2.10",
+    "@iconify/json": "^2.2.253",
+    "@iconify/react": "^5.0.2",
     "autoprefixer": "^10.4.20",
     "bootstrap-icons": "^1.11.3",
     "next": "14.2.13",