51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
"use client";
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { ArrowLeft } from "lucide-react";
|
|
import Footer from "./Footer"; // Assuming you moved it to a component
|
|
import { PageLayoutProps } from "@/types/index";
|
|
|
|
export default function PageLayout({
|
|
children,
|
|
backLink,
|
|
backLabel = "BACK TO DASHBOARD",
|
|
maxWidth = "5xl",
|
|
}: PageLayoutProps) {
|
|
const widthClass = {
|
|
"5xl": "max-w-5xl",
|
|
"6xl": "max-w-6xl",
|
|
"7xl": "max-w-7xl",
|
|
}[maxWidth];
|
|
|
|
return (
|
|
<main className="min-h-screen bg-[#0a0a0a] text-white pt-6 md:pt-12 lg:pt-24 px-6 md:px-12 lg:px-24 pb-8 flex flex-col">
|
|
<div className={`${widthClass} mx-auto w-full flex-grow flex flex-col`}>
|
|
<div className="flex-grow">
|
|
{backLink && (
|
|
<Link
|
|
href={backLink}
|
|
className="group flex items-center gap-2 text-neutral-500 hover:text-white transition-colors mb-12 font-mono text-[10px] uppercase tracking-widest w-fit"
|
|
>
|
|
<ArrowLeft
|
|
size={12}
|
|
className="transition-transform group-hover:-translate-x-1"
|
|
/>
|
|
{backLabel}
|
|
</Link>
|
|
)}
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</div>
|
|
|
|
<Footer />
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|