54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import { ReactNode } from "react"
|
|
|
|
interface PageWrapperProps {
|
|
children: ReactNode
|
|
maxWidth?: "4xl" | "5xl" | "6xl" | "7xl" | "full"
|
|
className?: string
|
|
}
|
|
|
|
export function PageWrapper({
|
|
children,
|
|
maxWidth = "4xl",
|
|
className = "",
|
|
}: PageWrapperProps) {
|
|
const maxWidthClass = {
|
|
"4xl": "max-w-4xl",
|
|
"5xl": "max-w-5xl",
|
|
"6xl": "max-w-6xl",
|
|
"7xl": "max-w-7xl",
|
|
full: "max-w-full",
|
|
}[maxWidth]
|
|
|
|
return (
|
|
<div
|
|
className={`container mx-auto px-4 py-8 md:py-12 ${maxWidthClass} ${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface PageHeaderProps {
|
|
title: string
|
|
subtitle?: string
|
|
className?: string
|
|
}
|
|
|
|
export function PageHeader({
|
|
title,
|
|
subtitle,
|
|
className = "",
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className={`mb-8 md:mb-12 text-center ${className}`}>
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 tracking-tight text-balance">
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto text-balance">
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|