mirror of https://github.com/buster-so/buster.git
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { AppPageLayoutHeader } from './AppPageLayoutHeader';
|
|
import { AppPageLayoutContent } from './AppPageLayoutContent';
|
|
|
|
/**
|
|
* @param header - Header content at the top of the page
|
|
* @param floating - Applies floating styles (default: true)
|
|
* @param scrollable - Makes content scrollable (default: true)
|
|
* @param className - Additional CSS classes
|
|
* @param children - Page content
|
|
* @internal
|
|
*/
|
|
export const AppPageLayout: React.FC<
|
|
React.PropsWithChildren<{
|
|
header?: React.ReactNode;
|
|
scrollable?: boolean;
|
|
className?: string;
|
|
headerSizeVariant?: 'default' | 'list';
|
|
headerBorderVariant?: 'default' | 'ghost';
|
|
headerClassName?: string;
|
|
mainClassName?: string;
|
|
}>
|
|
> = ({
|
|
children,
|
|
header,
|
|
scrollable = false,
|
|
className = '',
|
|
headerSizeVariant = 'default',
|
|
headerBorderVariant = 'default',
|
|
headerClassName = '',
|
|
mainClassName = ''
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'app-page-layout flex h-full w-full flex-col overflow-hidden',
|
|
scrollable && 'overflow-y-auto',
|
|
className
|
|
)}>
|
|
{header && (
|
|
<AppPageLayoutHeader
|
|
className={cn(
|
|
headerBorderVariant === 'ghost' && 'relative z-10 -mt-[1px]',
|
|
headerClassName
|
|
)}
|
|
sizeVariant={headerSizeVariant}
|
|
borderVariant={headerBorderVariant}>
|
|
{header}
|
|
</AppPageLayoutHeader>
|
|
)}
|
|
|
|
<AppPageLayoutContent
|
|
className={cn(headerBorderVariant === 'ghost' && 'scroll-shadow-container', mainClassName)}
|
|
scrollable={scrollable}>
|
|
{header && scrollable && headerBorderVariant === 'ghost' && (
|
|
<div className="scroll-header"></div>
|
|
)}
|
|
|
|
{children}
|
|
</AppPageLayoutContent>
|
|
</div>
|
|
);
|
|
};
|