randrews
79832ed818
HelpModal component shows game setup and scoring rules in a scrollable overlay, triggered by a ? button top-right on Player Setup and Enter Scores. Enter Scores also gets a ← back button top-left that returns to the scoresheet without saving. PageFrame gains a headerActionLeft slot to support the left-side button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
29 lines
957 B
TypeScript
29 lines
957 B
TypeScript
import styles from './PageFrame.module.css'
|
|
|
|
interface Props {
|
|
title: string
|
|
children: React.ReactNode
|
|
footer?: React.ReactNode
|
|
headerAction?: React.ReactNode
|
|
headerActionLeft?: React.ReactNode
|
|
overlay?: React.ReactNode
|
|
}
|
|
|
|
export default function PageFrame({ title, children, footer, headerAction, headerActionLeft, overlay }: Props) {
|
|
return (
|
|
<div className={styles.frame}>
|
|
<header className={styles.header}>
|
|
<h1 className={styles.title}>{title}</h1>
|
|
<div className={styles.rule} role="separator" />
|
|
{headerAction && <div className={styles.headerAction}>{headerAction}</div>}
|
|
{headerActionLeft && <div className={styles.headerActionLeft}>{headerActionLeft}</div>}
|
|
</header>
|
|
<div className={styles.content}>
|
|
{children}
|
|
</div>
|
|
{footer && <div className={styles.footer}>{footer}</div>}
|
|
{overlay && <div className={styles.overlay}>{overlay}</div>}
|
|
</div>
|
|
)
|
|
}
|