78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from 'framer-motion';
|
||
import { ArrowLeft } from 'lucide-react';
|
||
import Link from 'next/link';
|
||
|
||
interface DocumentLayoutProps {
|
||
title: string;
|
||
children: React.ReactNode;
|
||
}
|
||
|
||
const DocumentLayout = ({ title, children }: DocumentLayoutProps) => {
|
||
const containerVariants = {
|
||
hidden: { opacity: 0 },
|
||
visible: {
|
||
opacity: 1,
|
||
transition: {
|
||
staggerChildren: 0.1,
|
||
},
|
||
},
|
||
};
|
||
|
||
const itemVariants = {
|
||
hidden: { y: 20, opacity: 0 },
|
||
visible: {
|
||
y: 0,
|
||
opacity: 1,
|
||
transition: {
|
||
duration: 0.5,
|
||
},
|
||
},
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-50 py-20">
|
||
<div className="container mx-auto px-4">
|
||
<motion.div
|
||
initial="hidden"
|
||
animate="visible"
|
||
variants={containerVariants}
|
||
className="max-w-4xl mx-auto"
|
||
>
|
||
{/* Навигация */}
|
||
<motion.div variants={itemVariants} className="mb-8">
|
||
<Link
|
||
href="/"
|
||
className="inline-flex items-center text-blue-700 hover:text-blue-800"
|
||
>
|
||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||
<span>Вернуться на главную</span>
|
||
</Link>
|
||
</motion.div>
|
||
|
||
{/* Заголовок */}
|
||
<motion.div
|
||
variants={itemVariants}
|
||
className="bg-white rounded-xl p-8 shadow-lg mb-8"
|
||
>
|
||
<h1 className="text-3xl md:text-4xl font-bold text-gray-900">
|
||
{title}
|
||
</h1>
|
||
</motion.div>
|
||
|
||
{/* Контент */}
|
||
<motion.div
|
||
variants={itemVariants}
|
||
className="bg-white rounded-xl p-8 shadow-lg prose prose-blue max-w-none"
|
||
>
|
||
{children}
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default DocumentLayout;
|