39 lines
2.2 KiB
TypeScript
39 lines
2.2 KiB
TypeScript
export function CanvasRefreshShell() {
|
|
return (
|
|
<main className="relative h-full min-h-0 overflow-hidden bg-background text-foreground">
|
|
<div
|
|
className="absolute inset-0 opacity-60"
|
|
style={{
|
|
backgroundImage: "radial-gradient(circle, var(--border) 1px, transparent 1px)",
|
|
backgroundSize: "28px 28px",
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className="absolute bottom-5 left-1/2 z-[var(--z-toolbar)] flex h-14 -translate-x-1/2 items-center gap-1 rounded-xl border px-2 shadow-lg backdrop-blur"
|
|
style={{ background: "var(--background)", borderColor: "var(--border)" }}
|
|
aria-hidden="true"
|
|
>
|
|
{Array.from({ length: 7 }).map((_, index) => (
|
|
<div key={index} className="size-8 rounded-md bg-current opacity-10" />
|
|
))}
|
|
</div>
|
|
|
|
<div className="absolute bottom-24 left-6 z-[var(--z-toolbar)] h-40 w-[240px] rounded-lg border shadow-2xl backdrop-blur-sm" style={{ background: "var(--background)", borderColor: "var(--border)" }} aria-hidden="true">
|
|
<div className="absolute left-7 top-7 h-5 w-12 rounded-sm bg-current opacity-10" />
|
|
<div className="absolute left-28 top-16 h-6 w-16 rounded-sm bg-current opacity-10" />
|
|
<div className="absolute bottom-7 left-16 h-8 w-20 rounded-sm bg-current opacity-10" />
|
|
<div className="absolute inset-5 rounded border border-current opacity-15" />
|
|
</div>
|
|
|
|
<div className="absolute bottom-5 left-5 z-[var(--z-toolbar)] flex h-14 w-[260px] items-center gap-2 rounded-xl border px-2 shadow-lg backdrop-blur" style={{ background: "var(--background)", borderColor: "var(--border)" }} aria-hidden="true">
|
|
<div className="size-8 rounded-md bg-current opacity-10" />
|
|
<div className="size-8 rounded-md bg-current opacity-10" />
|
|
<div className="h-1 flex-1 rounded-full bg-current opacity-10" />
|
|
<div className="h-4 w-10 rounded bg-current opacity-10" />
|
|
<div className="size-8 rounded-md bg-current opacity-10" />
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|