External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Status indicator

Browse Source
This commit is contained in:
headlessdev 2025-04-21 12:40:55 +02:00
parent df2c788b0b
commit a1a5e5e299
3 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/dashboard/applications/Applications.tsx
View File

@ -73,6 +73,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
import { StatusIndicator } from "@/components/status-indicator";
interface Application {
id: number;
@ -440,20 +441,9 @@ export default function Dashboard() {
>
<CardHeader>
<div className="absolute top-2 right-2">
<div
className={`w-4 h-4 rounded-full flex items-center justify-center ${
app.online ? "bg-green-700" : "bg-red-700"
}`}
title={app.online ? "Online" : "Offline"}
>
<div
className={`w-2 h-2 rounded-full ${
app.online ? "bg-green-500" : "bg-red-500"
}`}
/>
<StatusIndicator isOnline={app.online} />
</div>
</div>
<div className="flex items-center justify-between w-full">
<div className="flex items-center justify-between w-full mt-4 mb-4">
<div className="flex items-center">
<div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
{app.icon ? (

11
app/dashboard/servers/Servers.tsx
View File

@ -58,7 +58,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Checkbox } from "@/components/ui/checkbox"
import { ScrollArea } from "@/components/ui/scroll-area"
import { DynamicIcon } from "lucide-react/dynamic"
import { StatusIndicator } from "@/components/status-indicator"
interface Server {
id: number
name: string
@ -832,14 +832,7 @@ export default function Dashboard() {
<CardHeader>
{server.monitoring && (
<div className="absolute top-2 right-2">
<div
className={`w-4 h-4 rounded-full flex items-center justify-center ${server.online ? "bg-green-700" : "bg-red-700"}`}
title={server.online ? "Online" : "Offline"}
>
<div
className={`w-2 h-2 rounded-full ${server.online ? "bg-green-500" : "bg-red-500"}`}
/>
</div>
<StatusIndicator isOnline={server.online} />
</div>
)}
<div className="flex items-center justify-between w-full">

38
components/status-indicator.tsx Normal file
View File

@ -0,0 +1,38 @@
"use client"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
interface StatusIndicatorProps {
isOnline?: boolean
className?: string
showLabel?: boolean
pulseAnimation?: boolean
}
export function StatusIndicator({
isOnline = false,
className,
showLabel = true,
pulseAnimation = true,
}: StatusIndicatorProps) {
return (
<Badge
variant="outline"
className={cn(
"flex items-center gap-2 px-2 py-1 border-transparent transition-colors duration-300",
isOnline
? "bg-green-100 dark:bg-green-950/30 text-green-800 dark:text-green-300"
: "bg-red-100 dark:bg-red-950/30 text-red-800 dark:text-red-300",
className,
)}
>
<span className={cn("relative flex h-2.5 w-2.5 rounded-full", isOnline ? "bg-green-500" : "bg-red-500")}>
{isOnline && pulseAnimation && (
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
)}
</span>
{showLabel && <span className="text-xs font-medium">{isOnline ? "Online" : "Offline"}</span>}
</Badge>
)
}