2025-11-18 14:17:52 +09:00
|
|
|
'use client';
|
|
|
|
|
|
2025-11-23 16:10:27 +09:00
|
|
|
import { ReactNode } from "react";
|
2025-11-18 14:17:52 +09:00
|
|
|
|
|
|
|
|
interface PageLayoutProps {
|
|
|
|
|
children: ReactNode;
|
|
|
|
|
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
|
|
|
|
|
versionInfo?: ReactNode;
|
|
|
|
|
}
|
|
|
|
|
|
2025-11-23 16:10:27 +09:00
|
|
|
export function PageLayout({ children, maxWidth = "full", versionInfo }: PageLayoutProps) {
|
2025-11-18 14:17:52 +09:00
|
|
|
|
|
|
|
|
const maxWidthClasses = {
|
|
|
|
|
sm: "max-w-3xl",
|
|
|
|
|
md: "max-w-5xl",
|
|
|
|
|
lg: "max-w-6xl",
|
|
|
|
|
xl: "max-w-7xl",
|
|
|
|
|
"2xl": "max-w-[1600px]",
|
|
|
|
|
full: "w-full"
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
2026-01-28 14:53:20 +09:00
|
|
|
<div className={`p-0 space-y-3 md:space-y-6 flex flex-col ${maxWidthClasses[maxWidth]} mx-auto w-full relative`}>
|
2025-11-18 14:17:52 +09:00
|
|
|
{versionInfo && (
|
|
|
|
|
<div className="absolute top-4 right-4 z-10">
|
|
|
|
|
{versionInfo}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{children}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|