mirror of
https://github.com/basketikun/infinite-canvas.git
synced 2026-08-05 08:54:23 +08:00
HouYunFei
187c499ef9
Move the module-scope presentational subcomponents out of project.tsx: - canvas-refresh-shell.tsx: CanvasRefreshShell (pre-load placeholder). - canvas-create-menus.tsx: ConnectionCreateMenu, ConnectionCreateOption, NodeCreateMenu, plus the PendingConnectionCreate type they define. They already communicated via explicit props, so the move is mechanical. No behavior change; project.tsx imports them back and drops now-unused icon and node-registry imports. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
35 lines
2.1 KiB
TypeScript
35 lines
2.1 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-50 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-50 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-50 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>
|
|
);
|
|
}
|