deploy-ease-platform/frontend/src/components/ui/layout.tsx
2024-12-27 21:27:06 +08:00

66 lines
1.3 KiB
TypeScript

import * as React from "react";
import { cn } from "@/lib/utils";
const Layout = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex h-screen overflow-hidden",
className
)}
{...props}
/>
));
Layout.displayName = "Layout";
const LayoutContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex flex-1 flex-col overflow-hidden",
className
)}
{...props}
/>
));
LayoutContent.displayName = "LayoutContent";
const Header = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex h-16 items-center border-b bg-background px-6",
"z-40",
"shadow-sm",
className
)}
{...props}
/>
));
Header.displayName = "Header";
const Main = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"flex-1 overflow-auto p-6",
className
)}
{...props}
/>
));
Main.displayName = "Main";
export { Layout, LayoutContent, Header, Main };