74 lines
2.3 KiB
TypeScript
74 lines
2.3 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 flex-col bg-background",
|
||
|
|
// Mobile: Scrollable page height
|
||
|
|
"min-h-[calc(100vh-64px)]",
|
||
|
|
// Desktop: Fixed height, no window scroll
|
||
|
|
"xl:h-[calc(100vh-64px)] xl:overflow-hidden",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{/* 1. Header Area */}
|
||
|
|
<div className="flex-none border-b border-border bg-background">
|
||
|
|
{header}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 2. Main Content Area */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex flex-1 flex-col",
|
||
|
|
// Mobile: Allow content to flow naturally with spacing
|
||
|
|
"overflow-visible pb-4 gap-4",
|
||
|
|
// Desktop: Internal scrolling, horizontal layout, no page spacing
|
||
|
|
"xl:overflow-hidden xl:flex-row xl:pb-0 xl:gap-0",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{/* Left Column: Chart & Info */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex flex-col border-border",
|
||
|
|
// Mobile: Fixed height for chart to ensure visibility
|
||
|
|
"h-[320px] flex-none border-b sm:h-[360px]",
|
||
|
|
// Desktop: Fill remaining space, remove bottom border, add right border
|
||
|
|
"xl:flex-1 xl:h-auto xl:min-h-0 xl:min-w-0 xl:border-b-0 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] xl:pr-2 2xl:w-[500px]">
|
||
|
|
{/* Top: Order Book (Hoga) */}
|
||
|
|
<div className="h-[390px] flex-none overflow-hidden border-t border-border sm:h-[430px] xl:min-h-0 xl:flex-1 xl:h-auto xl:border-t-0 xl:border-b">
|
||
|
|
{orderBook}
|
||
|
|
</div>
|
||
|
|
{/* Bottom: Order Form */}
|
||
|
|
<div className="flex-none h-auto sm:h-auto xl:h-[380px]">
|
||
|
|
{orderForm}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|