vibeasite-templates/template-developer-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: developer-tools template (15 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 23:02:20 +00:00
parent b98da733bf
commit ac0cf6f7ee
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Status.tsx
+7 -7
View File
@@ -43,7 +43,7 @@ function StatusDot({ status }: { status: string }) {
degraded: "bg-amber-500", degraded: "bg-amber-500",
down: "bg-red-500", down: "bg-red-500",
}; };
return <span className={`h-3 w-3 rounded-full \${colors[status] || colors.operational} inline-block`} />; return <span className={`h-3 w-3 rounded-full ${colors[status] || colors.operational} inline-block`} />;
} }
export default function StatusPage() { export default function StatusPage() {
@@ -56,7 +56,7 @@ export default function StatusPage() {
<div className="pt-32 pb-24 mx-auto max-w-4xl px-6"> <div className="pt-32 pb-24 mx-auto max-w-4xl px-6">
{/* Overall Status */} {/* Overall Status */}
<div className="text-center mb-16"> <div className="text-center mb-16">
<div className={`inline-flex items-center gap-3 px-6 py-3 rounded-full mb-6 \${ <div className={`inline-flex items-center gap-3 px-6 py-3 rounded-full mb-6 ${
allOperational allOperational
? "bg-emerald-500/10 border border-emerald-500/20" ? "bg-emerald-500/10 border border-emerald-500/20"
: "bg-amber-500/10 border border-amber-500/20" : "bg-amber-500/10 border border-amber-500/20"
@@ -66,7 +66,7 @@ export default function StatusPage() {
) : ( ) : (
<AlertTriangle className="h-6 w-6 text-amber-400" /> <AlertTriangle className="h-6 w-6 text-amber-400" />
)} )}
<span className={`text-lg font-semibold \${allOperational ? "text-emerald-400" : "text-amber-400"}`}> <span className={`text-lg font-semibold ${allOperational ? "text-emerald-400" : "text-amber-400"}`}>
{allOperational ? "All Systems Operational" : "Partial Degradation"} {allOperational ? "All Systems Operational" : "Partial Degradation"}
</span> </span>
</div> </div>
@@ -84,7 +84,7 @@ export default function StatusPage() {
{services.map((service, i) => ( {services.map((service, i) => (
<div <div
key={service.name} key={service.name}
className={`flex items-center justify-between py-4 \${ className={`flex items-center justify-between py-4 ${
i < services.length - 1 ? "border-b border-slate-800" : "" i < services.length - 1 ? "border-b border-slate-800" : ""
}`} }`}
> >
@@ -93,7 +93,7 @@ export default function StatusPage() {
<span className="font-medium text-white">{service.name}</span> <span className="font-medium text-white">{service.name}</span>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Badge variant="outline" className={`text-xs \${ <Badge variant="outline" className={`text-xs ${
service.status === "operational" service.status === "operational"
? "text-emerald-400 border-emerald-500/30" ? "text-emerald-400 border-emerald-500/30"
: service.status === "degraded" : service.status === "degraded"
@@ -122,10 +122,10 @@ export default function StatusPage() {
{Array.from({ length: 90 }).map((_, i) => ( {Array.from({ length: 90 }).map((_, i) => (
<div <div
key={i} key={i}
className={`flex-1 rounded-sm \${ className={`flex-1 rounded-sm ${
i === 62 ? "bg-amber-500" : i === 71 ? "bg-amber-500" : "bg-emerald-500/60" i === 62 ? "bg-amber-500" : i === 71 ? "bg-amber-500" : "bg-emerald-500/60"
}`} }`}
title={`Day \${90 - i}`} title={`Day ${90 - i}`}
/> />
))} ))}
</div> </div>