feat: Introduce PageLayout component to standardize page headers and overall structure across various application pages.

2026-03-02 15:35:34 -03:00
parent fe730998a9
commit 2f76ba2f87
12 changed files with 724 additions and 653 deletions
@@ -0,0 +1,93 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { ChevronLeft } from "lucide-react";
+
+interface PageLayoutProps {
+    /** Título principal de la página */
+    title: string;
+    /** Descripción/subtítulo opcional */
+    description?: string;
+    /** Acciones que van a la derecha del título (botones, etc.) */
+    actions?: React.ReactNode;
+    /** Componente de navegación secundaria (ej: pestañas del editor) */
+    navigation?: React.ReactNode;
+    /** Link de "volver atrás" — mostrar solo cuando sea necesario */
+    backHref?: string;
+    backLabel?: string;
+    /** Contenido principal de la página */
+    children: React.ReactNode;
+    /** Ancho máximo del contenedor: 'default' (max-w-7xl) o 'narrow' (max-w-5xl) */
+    maxWidth?: "default" | "narrow" | "wide";
+}
+
+const MAX_WIDTH_CLASS = {
+    default: "max-w-7xl",
+    narrow: "max-w-5xl",
+    wide: "max-w-screen-2xl",
+};
+
+/**
+ * Componente de layout estándar para todas las páginas del Studio.
+ * Garantiza: mismo padding superior, misma jerarquía tipográfica, mismo max-width.
+ */
+export default function PageLayout({
+    title,
+    description,
+    actions,
+    navigation,
+    backHref,
+    backLabel = "Volver",
+    children,
+    maxWidth = "default",
+}: PageLayoutProps) {
+    const containerClass = MAX_WIDTH_CLASS[maxWidth];
+
+    return (
+        <div className="min-h-screen bg-transparent">
+            <div className={`${containerClass} mx-auto px-6 pt-10 pb-12`}>
+
+                {/* Back link */}
+                {backHref && (
+                    <Link
+                        href={backHref}
+                        className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 transition-colors mb-5"
+                    >
+                        <ChevronLeft className="w-4 h-4" />
+                        {backLabel}
+                    </Link>
+                )}
+
+                {/* Page header */}
+                <div className="flex items-start justify-between gap-4 mb-8">
+                    <div>
+                        <h1 className="text-2xl font-black text-gray-900 dark:text-white tracking-tight leading-tight">
+                            {title}
+                        </h1>
+                        {description && (
+                            <p className="mt-1.5 text-sm text-slate-500 dark:text-gray-400">
+                                {description}
+                            </p>
+                        )}
+                    </div>
+                    {actions && (
+                        <div className="flex items-center gap-3 shrink-0">
+                            {actions}
+                        </div>
+                    )}
+                </div>
+
+                {/* Optional secondary navigation (tabs, breadcrumbs, etc.) */}
+                {navigation && (
+                    <div className="mb-6">
+                        {navigation}
+                    </div>
+                )}
+
+                {/* Main content */}
+                {children}
+            </div>
+        </div>
+    );
+}