Components / AI Dashboards

AI Service Status Badge

An AI service status indicator showing operational health with animated pulse dots and uptime percentages.

Live Preview — ai-status-badge-01

Inference API

operational

99.98%

Uptime

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

ai-status-badge-01.tsx 
"use client";

import React from "react";
import { CheckCircle2, HelpCircle } from "lucide-react";

interface ServiceStatusProps {
    name?: string;
    status?: "operational" | "degraded" | "outage";
    uptime?: string;
}

export default function AIServiceStatus({
    name = "Inference API",
    status = "operational",
    uptime = "99.98%"
}: ServiceStatusProps) {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-4 py-3 shadow-sm w-full max-w-xs mx-auto flex items-center justify-between">
            <div className="flex items-center gap-3">
                <div className="relative">
                    <div className={`h-2.5 w-2.5 rounded-full ${status === "operational" ? "bg-emerald-500" : status === "degraded" ? "bg-amber-500" : "bg-red-500"
                        }`} />
                    <div className={`absolute inset-0 h-2.5 w-2.5 rounded-full animate-ping opacity-75 ${status === "operational" ? "bg-emerald-500" : status === "degraded" ? "bg-amber-500" : "bg-red-500"
                        }`} />
                </div>
                <div>
                    <p className="text-sm font-bold text-zinc-900 dark:text-zinc-100 leading-tight">{name}</p>
                    <p className="text-[10px] text-zinc-500 font-medium uppercase tracking-wider">{status}</p>
                </div>
            </div>
            <div className="text-right">
                <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{uptime}</p>
                <p className="text-[10px] text-zinc-500 font-medium">Uptime</p>
            </div>
        </div>
    );
}

Type Reference

Types and interfaces defined in this component.

ServiceStatusProps 
interface ServiceStatusProps {
    name?: string;
    status?: "operational" | "degraded" | "outage";
    uptime?: string;
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIServiceStatus() { name = "Inference API", status = "operational", uptime = "99.98%" }: ServiceStatusProps

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<div> 7× Native Native HTML
<p> 4× Native Native HTML

Related Components

  • AI Analytics Card — A dashboard analytics card showing AI model usage metrics with sparkline charts, percentage changes, and trend indicators.
  • AI Token Usage Meter — A circular progress meter showing AI token consumption with remaining quota and cost estimation.
  • AI Model Performance Table — A comparison table showing AI model performance benchmarks with sortable columns for speed, accuracy, and cost.
  • AI Request Log — A real-time scrolling log of AI API requests with status indicators, response times, and token counts.
  • AI Cost Breakdown Chart — A visual cost breakdown showing AI spending by model with horizontal bar charts and total cost summary.
  • AI Activity Feed — A timestamped activity feed showing recent AI interactions, model changes, and system events with icon indicators.