44 lines
883 B
TypeScript
44 lines
883 B
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { clsx } from 'clsx';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
export interface AppShellProps {
|
|
navRail: React.ReactNode;
|
|
inspector?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export const AppShell: React.FC<AppShellProps> = ({
|
|
navRail,
|
|
inspector,
|
|
children,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={twMerge(
|
|
clsx(
|
|
'flex h-screen w-screen overflow-hidden',
|
|
'bg-gray-950 text-gray-100',
|
|
),
|
|
className,
|
|
)}
|
|
>
|
|
{/* NavRail — 64px fixed left */}
|
|
{navRail}
|
|
|
|
{/* Main content — flex-1 */}
|
|
<main className="flex-1 overflow-y-auto overflow-x-hidden">
|
|
{children}
|
|
</main>
|
|
|
|
{/* Inspector panel — slide-in right */}
|
|
{inspector}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
AppShell.displayName = 'AppShell';
|