55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import type { ReactNode } from 'react';
|
||
|
|
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Wrapper for entity detail pages (clients, yachts, companies, etc.). Renders:
|
||
|
|
* - sticky compact header (entity name + status pill)
|
||
|
|
* - the children (existing tab dropdown selector + tab body)
|
||
|
|
* - optional sticky bottom action shelf, pinned above the bottom tab bar on
|
||
|
|
* mobile (`pb-[calc(56px+env(safe-area-inset-bottom))]` content padding).
|
||
|
|
*/
|
||
|
|
export function DetailPageShell({
|
||
|
|
entityName,
|
||
|
|
status,
|
||
|
|
children,
|
||
|
|
bottomActions,
|
||
|
|
className,
|
||
|
|
}: {
|
||
|
|
entityName: string;
|
||
|
|
status?: ReactNode;
|
||
|
|
children: ReactNode;
|
||
|
|
bottomActions?: ReactNode;
|
||
|
|
className?: string;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<div className={cn('flex flex-col min-h-full', className)}>
|
||
|
|
<div className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b border-border px-4 py-3 sm:px-6">
|
||
|
|
<div className="flex items-center gap-3 min-w-0">
|
||
|
|
<h2 className="truncate text-lg font-semibold text-foreground">{entityName}</h2>
|
||
|
|
{status ? <div className="ml-auto shrink-0">{status}</div> : null}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className={cn('flex-1 px-4 py-4 sm:px-6 sm:py-6', bottomActions && 'pb-24 sm:pb-6')}>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{bottomActions ? (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'sm:hidden',
|
||
|
|
'fixed inset-x-0 bottom-[calc(56px+env(safe-area-inset-bottom))] z-30',
|
||
|
|
'border-t border-border bg-background/95 backdrop-blur px-4 py-3',
|
||
|
|
'flex items-center gap-2',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{bottomActions}
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|