Files
zhimingge/components/layout/mode-workspace.tsx
T
dekun 18dd2e3501 Narrow desktop layout margins and fix taiji icon in light mode.
Cap content width at 1152px with side margins on ultrawide screens, add stroke to taiji logo for light backgrounds, and shrink backdrop watermark.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-11 00:04:10 +08:00

36 lines
1.2 KiB
TypeScript

"use client";
import { Sparkles } from "lucide-react";
import { MODE_CONTAINER } from "@/lib/layout";
export function ModeWorkspace({
children,
aiPanel,
aiTitle = "AI 解读",
}: {
children: React.ReactNode;
aiPanel: React.ReactNode;
aiTitle?: string;
}) {
return (
<div className={`${MODE_CONTAINER} py-6 lg:py-8`}>
<div className="grid gap-6 lg:grid-cols-2 lg:items-stretch lg:gap-8 xl:gap-10">
<div className="grid h-full min-h-0 auto-rows-fr gap-5 lg:min-h-[calc(100vh-9rem)]">
{children}
</div>
<aside className="flex min-h-[320px] flex-col lg:min-h-[calc(100vh-9rem)]">
<div className="zen-card flex min-h-0 flex-1 flex-col rounded-2xl border border-border/60 bg-card/90 shadow-md backdrop-blur-sm">
<div className="flex items-center gap-2 border-b border-border/50 px-5 py-4">
<Sparkles size={18} className="text-primary/80" />
<h2 className="text-sm font-medium tracking-widest text-muted-foreground">
{aiTitle}
</h2>
</div>
<div className="flex min-h-0 flex-1 flex-col p-4 sm:p-5">{aiPanel}</div>
</div>
</aside>
</div>
</div>
);
}