296 lines
15 KiB
TypeScript
296 lines
15 KiB
TypeScript
"use client";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function Box() {
|
|
return (
|
|
<motion.div
|
|
initial={{
|
|
y: 25,
|
|
opacity: 0,
|
|
}}
|
|
whileInView={{
|
|
y: 0,
|
|
opacity: 1,
|
|
}}
|
|
viewport={{
|
|
once: true,
|
|
}}
|
|
className="relative p-5 border border-white/5 bg-[#0E1618]/10 backdrop-blur-sm"
|
|
>
|
|
<h3 className="mb-1 font-medium uppercase text-[#0CE77E]">All Systems Operational</h3>
|
|
|
|
<p className="mb-4 text-sm text-white/75">
|
|
Last updated on{" "}
|
|
{new Date(Date.now() - 3 * 60 * 1000)
|
|
.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
hour12: true,
|
|
timeZoneName: "short",
|
|
})
|
|
.replace(",", "")
|
|
.replace("AM", "am")
|
|
.replace("PM", "pm")}
|
|
</p>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="font-medium text-[#0CE77E]">GPU Instance</h3>
|
|
<h3 className="font-medium text-[#0CE77E]">99.960% uptime</h3>
|
|
</div>
|
|
|
|
{/* uptime status */}
|
|
<div className="relative">
|
|
<div className="flex h-[28px] w-full overflow-visible relative">
|
|
{[
|
|
{ status: "operational", width: "60%", details: "No incident reported" },
|
|
{
|
|
status: "degraded",
|
|
width: "0.5%",
|
|
details: "Resolved - Nvidia driver issue",
|
|
},
|
|
{ status: "operational", width: "39.5%", details: "No incident reported" },
|
|
].map((segment, index) => (
|
|
<div
|
|
key={index}
|
|
className={`h-full group cursor-help relative
|
|
${
|
|
segment.status === "operational"
|
|
? "bg-[#0CE77E]"
|
|
: segment.status === "degraded"
|
|
? "bg-yellow-500"
|
|
: "bg-red-500"
|
|
}`}
|
|
style={{ width: segment.width }}
|
|
>
|
|
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
|
{segment.status === "operational"
|
|
? "Fully Operational"
|
|
: segment.status === "degraded"
|
|
? "Degraded Performance"
|
|
: "System Down"}
|
|
<br />
|
|
Status: {segment.details}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="font-medium text-[#0CE77E]">Console</h3>
|
|
<h3 className="font-medium text-[#0CE77E]">99.890% uptime</h3>
|
|
</div>
|
|
|
|
{/* uptime status */}
|
|
<div className="relative">
|
|
<div className="flex h-[28px] w-full overflow-visible relative">
|
|
{[
|
|
{ status: "operational", width: "20%", details: "No incident reported" },
|
|
{
|
|
status: "downtime",
|
|
width: "0.5%",
|
|
details: "Service Unavailable",
|
|
},
|
|
{ status: "operational", width: "28%", details: "No incident reported" },
|
|
{ status: "degraded", width: "0.5%", details: "Updating SMTP" },
|
|
{ status: "operational", width: "51%", details: "No incident reported" },
|
|
].map((segment, index) => (
|
|
<div
|
|
key={index}
|
|
className={`h-full group cursor-help relative
|
|
${
|
|
segment.status === "operational"
|
|
? "bg-[#0CE77E]"
|
|
: segment.status === "degraded"
|
|
? "bg-yellow-500"
|
|
: "bg-red-500"
|
|
}`}
|
|
style={{ width: segment.width }}
|
|
>
|
|
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
|
{segment.status === "operational"
|
|
? "Fully Operational"
|
|
: segment.status === "degraded"
|
|
? "Degraded Performance"
|
|
: "System Down"}
|
|
<br />
|
|
Status: {segment.details}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="font-medium text-[#0CE77E]">Network</h3>
|
|
<h3 className="font-medium text-[#0CE77E]">99.940% uptime</h3>
|
|
</div>
|
|
|
|
{/* uptime status */}
|
|
<div className="relative">
|
|
<div className="flex h-[28px] w-full overflow-visible relative">
|
|
{[
|
|
{ status: "operational", width: "34%", details: "No incident reported" },
|
|
{
|
|
status: "degraded",
|
|
width: "0.5%",
|
|
details: "Resolved - Unusual high latency on some regions",
|
|
},
|
|
{ status: "operational", width: "35%", details: "No incident reported" },
|
|
{ status: "downtime", width: "0.5%", details: "Service Unavailable" },
|
|
{ status: "operational", width: "30%", details: "No incident reported" },
|
|
].map((segment, index) => (
|
|
<div
|
|
key={index}
|
|
className={`h-full group cursor-help relative
|
|
${
|
|
segment.status === "operational"
|
|
? "bg-[#0CE77E]"
|
|
: segment.status === "degraded"
|
|
? "bg-yellow-500"
|
|
: "bg-red-500"
|
|
}`}
|
|
style={{ width: segment.width }}
|
|
>
|
|
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
|
{segment.status === "operational"
|
|
? "Fully Operational"
|
|
: segment.status === "degraded"
|
|
? "Degraded Performance"
|
|
: "System Down"}
|
|
<br />
|
|
Status: {segment.details}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="font-medium text-[#0CE77E]">Proxy</h3>
|
|
<h3 className="font-medium text-[#0CE77E]">100% uptime</h3>
|
|
</div>
|
|
|
|
{/* uptime status */}
|
|
<div className="relative">
|
|
<div className="flex h-[28px] w-full overflow-visible relative">
|
|
{[{ status: "operational", width: "100%", details: "No incident reported" }].map(
|
|
(segment, index) => (
|
|
<div
|
|
key={index}
|
|
className={`h-full group cursor-help relative
|
|
${
|
|
segment.status === "operational"
|
|
? "bg-[#0CE77E]"
|
|
: segment.status === "degraded"
|
|
? "bg-yellow-500"
|
|
: "bg-red-500"
|
|
}`}
|
|
style={{ width: segment.width }}
|
|
>
|
|
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
|
{segment.status === "operational"
|
|
? "Fully Operational"
|
|
: segment.status === "degraded"
|
|
? "Degraded Performance"
|
|
: "System Down"}
|
|
<br />
|
|
Status: {segment.details}
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="py-4 border-t border-[#0CE77E]/25 items-center">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="font-medium text-[#0CE77E]">Database</h3>
|
|
<h3 className="font-medium text-[#0CE77E]">99.910% uptime</h3>
|
|
</div>
|
|
|
|
{/* uptime status */}
|
|
<div className="relative">
|
|
<div className="flex h-[28px] w-full overflow-visible relative">
|
|
{[
|
|
{ status: "operational", width: "80%", details: "No incident reported" },
|
|
{
|
|
status: "degraded",
|
|
width: "0.5%",
|
|
details: "Resolved - Deprecated DB API",
|
|
},
|
|
{ status: "operational", width: "19%", details: "No incident reported" },
|
|
].map((segment, index) => (
|
|
<div
|
|
key={index}
|
|
className={`h-full group cursor-help relative
|
|
${
|
|
segment.status === "operational"
|
|
? "bg-[#0CE77E]"
|
|
: segment.status === "degraded"
|
|
? "bg-yellow-500"
|
|
: "bg-red-500"
|
|
}`}
|
|
style={{ width: segment.width }}
|
|
>
|
|
<div className="absolute invisible z-20 group-hover:visible bg-black/90 text-white text-xs py-1 px-2 rounded -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap">
|
|
{segment.status === "operational"
|
|
? "Fully Operational"
|
|
: segment.status === "degraded"
|
|
? "Degraded Performance"
|
|
: "System Down"}
|
|
<br />
|
|
Status: {segment.details}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-2 text-xs text-white/50">Last 30 days - Hover segments for more details</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span className="absolute -top-px -left-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1 0V4.5" stroke="#0CE77E" />
|
|
<path d="M5.5 0.5L1 0.5" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span className="absolute -bottom-px -left-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M1 4.5V0" stroke="#0CE77E" />
|
|
<path d="M5.5 4L1 4" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span className="absolute -top-px -right-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 0V4.5" stroke="#0CE77E" />
|
|
<path d="M0.5 0.5L5 0.5" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span className="absolute -bottom-px -right-px group-hover:opacity-0 duration-200">
|
|
<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 4.5V0" stroke="#0CE77E" />
|
|
<path d="M0.5 4L5 4" stroke="#0CE77E" />
|
|
</svg>
|
|
</span>
|
|
</motion.div>
|
|
);
|
|
}
|