homeio

1"use client";
2
3import Image from "next/image";
4import { type ReactNode } from "react";
5import { FullScreenShell } from "./full-screen-shell";
6
7type StatusScreenProps = {
8  title: string;
9  body: string;
10  action?: ReactNode;
11  failed?: boolean;
12};
13
14export function StatusScreen({
15  title,
16  body,
17  action,
18  failed = false,
19}: StatusScreenProps) {
20  return (
21    <FullScreenShell
22      showClock={false}
23      center={
24        <div className="w-full max-w-md text-center">
25          <div className="mx-auto mb-5 flex w-fit flex-col items-center">
26            <div
27              className={`system-hero-surface flex size-24 items-center justify-center ${
28                failed ? "border-status-red/35 bg-status-red/10" : "animate-homeio-breathe-glow"
29              }`}
30            >
31              <Image
32                src="/icon.png"
33                alt="Homeio"
34                width={64}
35                height={64}
36                className={`relative z-10 size-[3.65rem] blur-[0.15px] ${failed ? "" : "animate-homeio-breathe"}`}
37              />
38            </div>
39            <div className="system-pill-surface mt-2.5 px-3 py-1 text-[10px] tracking-[0.24em] text-foreground/58 uppercase">
40              {failed ? "Error" : "Home server"}
41            </div>
42          </div>
43
44          <p className="text-[1.48rem] font-medium tracking-[-0.03em] text-foreground">
45            {title}
46          </p>
47          <p className="mb-5 mt-1 text-sm leading-6 text-muted-foreground/78">
48            {body}
49          </p>
50          {action}
51        </div>
52      }
53    />
54  );
55}
56