55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import { ReactNode } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface DashboardLayoutProps {
|
|
header: ReactNode;
|
|
chart: ReactNode;
|
|
orderBook: ReactNode;
|
|
orderForm: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function DashboardLayout({
|
|
header,
|
|
chart,
|
|
orderBook,
|
|
orderForm,
|
|
className,
|
|
}: DashboardLayoutProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex h-[calc(100vh-64px)] flex-col overflow-hidden",
|
|
className,
|
|
)}
|
|
>
|
|
{/* 1. Header Area */}
|
|
<div className="flex-none border-b border-border bg-background">
|
|
{header}
|
|
</div>
|
|
|
|
{/* 2. Main Content Area */}
|
|
<div className="flex flex-1 flex-col overflow-hidden xl:flex-row">
|
|
{/* Left Column: Chart & Info */}
|
|
<div className="flex min-h-0 min-w-0 flex-1 flex-col border-border xl:border-r">
|
|
<div className="flex-1 min-h-0">{chart}</div>
|
|
{/* Future: Transaction History / Market Depth can go here */}
|
|
</div>
|
|
|
|
{/* Right Column: Order Book & Order Form */}
|
|
<div className="flex min-h-0 w-full flex-none flex-col bg-background xl:w-[460px] 2xl:w-[500px]">
|
|
{/* Top: Order Book (Hoga) */}
|
|
<div className="min-h-[360px] flex-1 overflow-hidden border-t border-border xl:min-h-0 xl:border-t-0 xl:border-b">
|
|
{orderBook}
|
|
</div>
|
|
|
|
{/* Bottom: Order Form */}
|
|
<div className="flex-none h-[320px] sm:h-[360px] xl:h-[380px]">
|
|
{orderForm}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|