Richie
df7bbba915
Replace domain-specific (education/PDP) recipe stories with generic content. Fix TopBar action buttons using properly styled light-on-dark buttons instead of invisible IconButton tertiary. Use the real NSW waratah SVG logo. Add shared _story-helpers for TopBar actions and logo. Add DetailPage template for single-record/profile/document views with constrained width and tab support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export interface DetailPageProps extends HTMLAttributes<HTMLDivElement> {
|
|
/** PageHeader or custom header section */
|
|
header?: ReactNode
|
|
/** Action bar below the header (e.g. tabs, buttons) */
|
|
actions?: ReactNode
|
|
/** Single-column content area (max-w constrained for readability) */
|
|
children: ReactNode
|
|
/** Max width of the content area */
|
|
maxWidth?: 'md' | 'lg' | 'xl' | 'full'
|
|
}
|
|
|
|
const maxWidthStyles = {
|
|
md: 'max-w-2xl',
|
|
lg: 'max-w-3xl',
|
|
xl: 'max-w-5xl',
|
|
full: '',
|
|
}
|
|
|
|
export const DetailPage = forwardRef<HTMLDivElement, DetailPageProps>(
|
|
({ header, actions, maxWidth = 'xl', className, children, ...props }, ref) => {
|
|
return (
|
|
<div ref={ref} className={cn('flex flex-col', className)} {...props}>
|
|
{header}
|
|
|
|
{actions && (
|
|
<div className="flex items-center gap-4 border-b border-border px-6 py-3">
|
|
{actions}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex-1 p-6">
|
|
<div className={cn(maxWidthStyles[maxWidth])}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
DetailPage.displayName = 'DetailPage'
|