homeio

1"use client";
2
3import { cn } from "@/lib/utils";
4import { useResolvedWallpaper } from "@/modules/shell/hooks/useResolvedWallpaper";
5import { type ReactNode, useEffect, useState } from "react";
6
7type FullScreenShellProps = {
8  center: ReactNode;
9  bottom?: ReactNode;
10  topRight?: ReactNode;
11  wallpaper?: string;
12  showClock?: boolean;
13  centerClassName?: string;
14  bottomClassName?: string;
15};
16
17export function FullScreenShell({
18  center,
19  bottom,
20  topRight,
21  wallpaper,
22  showClock = true,
23  centerClassName,
24  bottomClassName,
25}: FullScreenShellProps) {
26  const [now, setNow] = useState<Date | null>(null);
27  const { wallpaper: storedWallpaper } = useResolvedWallpaper();
28  const resolvedWallpaper = wallpaper ?? storedWallpaper;
29
30  useEffect(() => {
31    setNow(new Date());
32    if (!showClock) return;
33
34    const timer = window.setInterval(() => setNow(new Date()), 1000);
35    return () => window.clearInterval(timer);
36  }, [showClock]);
37
38  return (
39    <main
40      className="relative min-h-screen overflow-hidden bg-background text-white"
41      data-testid="full-screen-shell"
42    >
43      <div className="absolute inset-0">
44        <div
45          className="absolute inset-0 scale-110 bg-cover bg-center bg-no-repeat"
46          style={{ backgroundImage: `url('${resolvedWallpaper}')` }}
47          data-testid="full-screen-wallpaper"
48        />
49        <div className="absolute inset-0 bg-background/62 backdrop-blur-3xl" />
50        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_22%,rgba(255,255,255,0.045)_0%,transparent_30%),radial-gradient(circle_at_50%_100%,rgba(255,96,0,0.16)_0%,transparent_42%)]" />
51        <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(4,10,18,0.26)_0%,rgba(4,10,18,0.14)_38%,rgba(18,12,8,0.3)_100%)]" />
52        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.12)_48%,rgba(0,0,0,0.4)_100%)]" />
53      </div>
54
55      {topRight ? (
56        <div className="absolute right-5 top-5 z-10">{topRight}</div>
57      ) : null}
58
59      <div className="relative flex min-h-screen flex-col px-6">
60        {showClock ? (
61          <div
62            className="pointer-events-none absolute inset-x-0 top-12 text-center sm:top-14"
63            data-testid="full-screen-clock"
64          >
65            <div className="system-floating-surface inline-flex min-w-[18rem] flex-col items-center bg-black/14 px-8 py-5 shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
66              <p className="text-6xl font-semibold tracking-[-0.08em] text-foreground/96 tabular-nums sm:text-7xl">
67                {now
68                  ? now.toLocaleTimeString("en-US", {
69                      hour: "2-digit",
70                      minute: "2-digit",
71                    })
72                  : "--:--"}
73              </p>
74              <p className="mt-2 text-sm tracking-[0.2em] text-foreground/52 uppercase sm:text-base">
75                {now
76                  ? now.toLocaleDateString("en-US", {
77                      weekday: "long",
78                      month: "long",
79                      day: "numeric",
80                      year: "numeric",
81                    })
82                  : "\u00a0"}
83              </p>
84            </div>
85          </div>
86        ) : null}
87
88        <div
89          className={cn(
90            "flex flex-1 items-center justify-center",
91            showClock ? "pt-32 sm:pt-36" : "",
92            bottom ? "pt-14 sm:pt-16" : "",
93            centerClassName,
94          )}
95        >
96          {center}
97        </div>
98
99        {bottom ? (
100          <div
101            className={cn("pb-10 sm:pb-14", bottomClassName)}
102            data-testid="full-screen-bottom"
103          >
104            {bottom}
105          </div>
106        ) : null}
107      </div>
108    </main>
109  );
110}
111