|
| 1 | +'use client' |
| 2 | + |
| 3 | +import Link from 'next/link' |
| 4 | +import { StatusDotIcon } from '@/components/icons' |
| 5 | +import type { StatusType } from '@/app/api/status/types' |
| 6 | +import { useStatus } from '@/hooks/queries/status' |
| 7 | + |
| 8 | +const STATUS_COLORS: Record<StatusType, string> = { |
| 9 | + operational: 'text-[#10B981] hover:text-[#059669]', |
| 10 | + degraded: 'text-[#F59E0B] hover:text-[#D97706]', |
| 11 | + outage: 'text-[#EF4444] hover:text-[#DC2626]', |
| 12 | + maintenance: 'text-[#3B82F6] hover:text-[#2563EB]', |
| 13 | + loading: 'text-muted-foreground hover:text-foreground', |
| 14 | + error: 'text-muted-foreground hover:text-foreground', |
| 15 | +} |
| 16 | + |
| 17 | +export default function StatusIndicator() { |
| 18 | + const { data, isLoading, isError } = useStatus() |
| 19 | + |
| 20 | + const status = isLoading ? 'loading' : isError ? 'error' : data?.status || 'error' |
| 21 | + const message = isLoading |
| 22 | + ? 'Checking Status...' |
| 23 | + : isError |
| 24 | + ? 'Status Unknown' |
| 25 | + : data?.message || 'Status Unknown' |
| 26 | + const statusUrl = data?.url || 'https://status.sim.ai' |
| 27 | + |
| 28 | + return ( |
| 29 | + <Link |
| 30 | + href={statusUrl} |
| 31 | + target='_blank' |
| 32 | + rel='noopener noreferrer' |
| 33 | + className={`flex items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`} |
| 34 | + aria-label={`System status: ${message}`} |
| 35 | + > |
| 36 | + <StatusDotIcon status={status} className='h-[6px] w-[6px]' aria-hidden='true' /> |
| 37 | + <span>{message}</span> |
| 38 | + </Link> |
| 39 | + ) |
| 40 | +} |
0 commit comments