62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import Link from 'next/link';
|
|
import { FiArrowLeft } from 'react-icons/fi';
|
|
import SiteGrid from './SiteGrid';
|
|
import { clsx } from 'clsx/lite';
|
|
import Badge from './Badge';
|
|
|
|
function AdminChildPage({
|
|
backPath,
|
|
backLabel,
|
|
breadcrumb,
|
|
accessory,
|
|
children,
|
|
}: {
|
|
backPath?: string
|
|
backLabel?: string
|
|
breadcrumb?: ReactNode
|
|
accessory?: ReactNode
|
|
children: ReactNode,
|
|
}) {
|
|
return (
|
|
<SiteGrid
|
|
contentMain={
|
|
<div className="space-y-6">
|
|
{(backPath || breadcrumb || accessory) &&
|
|
<div className={clsx(
|
|
'flex flex-wrap items-center gap-x-2 gap-y-3',
|
|
'min-h-[2.25rem]', // min-h-9 equivalent
|
|
)}>
|
|
<div className={clsx(
|
|
'flex flex-wrap items-center gap-x-1.5 sm:gap-x-3 gap-y-1',
|
|
'flex-grow',
|
|
)}>
|
|
{backPath &&
|
|
<Link
|
|
href={backPath}
|
|
className="flex gap-1.5 items-center"
|
|
>
|
|
<FiArrowLeft size={16} />
|
|
{backLabel || 'Back'}
|
|
</Link>}
|
|
{breadcrumb &&
|
|
<>
|
|
<span>/</span>
|
|
<Badge>
|
|
{breadcrumb}
|
|
</Badge>
|
|
</>}
|
|
</div>
|
|
{accessory &&
|
|
<div>{accessory}</div>}
|
|
</div>}
|
|
<div>
|
|
{children}
|
|
</div>
|
|
</div>}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default AdminChildPage;
|