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