albert/status-monitor
1
0
Fork 0
mirror of https://github.com/csehviktor/status-monitor.git synced 2025-08-08 18:06:14 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix responsive issues

Browse Source
This commit is contained in:
csehviktor
2025-07-06 04:44:20 +02:00
parent f08b4067ae
commit 92bfa6e4e8
4 changed files with 95 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
ui/src/pages/home.tsx
View File

@@ -32,55 +32,60 @@ export function HomePage() {
}}
/>
<main className="max-w-7xl mx-auto py-8">
<h2 className="text-xl font-semibold mb-4">Overview</h2>
<div className="mx-2">
<h2 className="text-xl font-semibold mb-4">Overview</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<AgentOverviewCard
props={{
count: totalAgents,
title: "total agents",
icon: {
ref: <Box />,
color: "rgb(96, 165, 250)",
bgColor: "rgba(59, 130, 246, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: onlineAgents,
title: "online",
icon: {
ref: (
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
),
color: "rgb(34, 197, 94)",
bgColor: "rgba(34, 197, 94, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: offlineAgents,
title: "offline",
icon: {
ref: (
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
),
color: "rgb(239, 68, 68)",
bgColor: "rgba(239, 68, 68, 0.2)",
},
}}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<AgentOverviewCard
props={{
count: totalAgents,
title: "total agents",
icon: {
ref: <Box />,
color: "rgb(96, 165, 250)",
bgColor: "rgba(59, 130, 246, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: onlineAgents,
title: "online",
icon: {
ref: (
<div className="w-3 h-3 bg-green-500 rounded-full animate-pulse-slow" />
),
color: "rgb(34, 197, 94)",
bgColor: "rgba(34, 197, 94, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
count: offlineAgents,
title: "offline",
icon: {
ref: (
<div className="w-3 h-3 bg-red-500 rounded-full animate-pulse-slow" />
),
color: "rgb(239, 68, 68)",
bgColor: "rgba(239, 68, 68, 0.2)",
},
}}
/>
</div>
<div className="mb-6">
<h2 className="text-xl font-semibold mb-4">Agents</h2>
<div className="mb-6">
<h2 className="text-xl font-semibold mb-4">Agents</h2>
<div className="space-y-6">
{agents.map((agent, index) => (
<AgentCard key={index} props={{ data: agent }} />
))}
<div className="space-y-6">
{agents.map((agent, index) => (
<AgentCard
key={index}
props={{ data: agent }}
/>
))}
</div>
</div>
</div>
</main>