Richie
95f72407f8
Introduce AppShell, DashboardPage, ListPage, and FormPage template components with Storybook recipe stories for AI agent consumption. Thoroughly update DESIGN.md with all missing components, corrected token values, and page layout conventions. Fix SideNav button items defaulting to centered text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
31 lines
984 B
TypeScript
31 lines
984 B
TypeScript
import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export interface DashboardPageProps extends HTMLAttributes<HTMLDivElement> {
|
|
/** PageHeader or custom header section */
|
|
header?: ReactNode
|
|
/** Row of stat cards or summary widgets displayed above the content grid */
|
|
stats?: ReactNode
|
|
/** Two-column responsive content grid area */
|
|
children: ReactNode
|
|
}
|
|
|
|
export const DashboardPage = forwardRef<HTMLDivElement, DashboardPageProps>(
|
|
({ header, stats, className, children, ...props }, ref) => {
|
|
return (
|
|
<div ref={ref} className={cn('flex flex-col', className)} {...props}>
|
|
{header}
|
|
|
|
<div className="flex flex-col gap-6 p-6">
|
|
{stats && <div className="flex flex-wrap gap-4">{stats}</div>}
|
|
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
DashboardPage.displayName = 'DashboardPage'
|