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

improve home page

Browse Source
This commit is contained in:
csehviktor
2025-07-03 08:17:11 +02:00
parent 7bea3eb594
commit fa7bce9c03
5 changed files with 88 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/components/AgentCard.tsx Normal file
View File

@@ -0,0 +1,36 @@
export type AgentOverviewCardProps = {
title: string;
icon: {
ref: React.ReactNode;
color: string;
bgColor: string;
};
};
export function AgentOverviewCard({
props,
}: {
props: AgentOverviewCardProps;
}) {
return (
<div className="bg-[#111111] border border-[#262626] rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-400 uppercase tracking-wider">
{props.title}
</p>
<p className="text-2xl font-bold text-white">0</p>
</div>
<div
className="w-12 h-12 rounded-lg flex items-center justify-center"
style={{
color: props.icon.color,
backgroundColor: props.icon.bgColor,
}}
>
{props.icon.ref}
</div>
</div>
</div>
);
}

21
ui/src/components/Header.tsx
View File

@@ -1,3 +1,5 @@
import { Zap } from "lucide-react";
export type HeaderProps = {
title: string;
subtitle: string;
@@ -7,24 +9,11 @@ export type HeaderProps = {
export function Header({ props }: { props: HeaderProps }) {
return (
<header className="bg-[#0f0f0f] border-b border-[#0e0e0e]">
<header className="bg-[#111111] border-b border-[#111111]">
<div className="max-w-7xl mx-auto py-4 flex justify-between items-center">
<div className="flex items-center space-x-3">
<div className="w-11 h-11 bg-pink-300 text-pink-500 p-1 rounded-lg flex">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
className="lucide lucide-chart-no-axes-column-increasing-icon lucide-chart-no-axes-column-increasing"
>
<line x1="12" x2="12" y1="20" y2="10" />
<line x1="18" x2="18" y1="20" y2="4" />
<line x1="6" x2="6" y1="20" y2="16" />
</svg>
<div className="w-11 h-11 text-yellow-500 flex items-center justify-center">
<Zap className="w-9 h-9" />
</div>
<div>
<h1 className="text-xl font-bold">{props.title}</h1>

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

@@ -1,4 +1,6 @@
import { AgentOverviewCard } from "@/components/AgentCard";
import { Header } from "@/components/Header";
import { Box } from "lucide-react";
export function HomePage() {
return (
@@ -11,8 +13,47 @@ export function HomePage() {
}}
/>
<main className="max-w-7xl mx-auto py-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<h1>helo vilag</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<AgentOverviewCard
props={{
title: "total agents",
icon: {
ref: <Box />,
color: "rgb(96, 165, 250)",
bgColor: "rgba(59, 130, 246, 0.2)",
},
}}
/>
<AgentOverviewCard
props={{
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={{
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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
</div>
</main>
</div>