openstatus.dev
Openstatus
www.openstatus.dev
1import { cn } from "@/lib/utils";
2
3export function Background({
4 children,
5 tw,
6}: {
7 children: React.ReactNode;
8 tw?: string;
9}) {
10 return (
11 <div
12 tw={cn(
13 "relative flex flex-col bg-white items-center justify-center w-full h-full",
14 tw,
15 )}
16 >
17 <div
18 tw="flex w-full h-full absolute inset-0"
19 // not every css variable is supported
20 style={{
21 backgroundImage: "radial-gradient(#cbd5e1 10%, transparent 10%)",
22 backgroundSize: "16px 16px",
23 }}
24 />
25 <div
26 tw="flex w-full h-full absolute inset-0 opacity-70"
27 style={{
28 backgroundColor: "white",
29 backgroundImage:
30 "radial-gradient(farthest-corner at 100px 100px, #cbd5e1, white 80%)", // tbd: switch color position
31 }}
32 />
33 {children}
34 </div>
35 );
36}