Iconify/react icons in dashboard/page.jsx

This commit is contained in:
ISA
2024-09-29 10:52:05 +02:00
parent 2a608408ce
commit 88e7884810
5 changed files with 133 additions and 13 deletions

View File

@@ -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 */}
<div className="flex justify-between items-center mb-4">
<h1 className="text-xl font-bold text-gray-700">
Letzten 20 Meldungen
</h1>
<button className="text-red-500 hover:text-red-600">
<i className="bi bi-trash"></i>
</button>
{/* Letzte Meldungen - Titel und Icon Bereich */}
<div className="flex justify-between items-center pb-2 w-full lg:w-2/3 mt-8">
<div className="flex justify-between gap-1 ">
<Icon
icon="ri:calendar-schedule-line"
className="text-blue-500 text-4xl"
/>
<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">
<Kue705_FO />
<div className="flex flex-col item-center justify-between gap-1">
<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>