49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import PageHeader from '../../common/components/PageHeader';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface DashboardLayoutProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
actions?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
maxWidth?: string;
|
|
backAction?: React.ReactNode;
|
|
}
|
|
|
|
const DashboardLayout: React.FC<DashboardLayoutProps> = ({
|
|
title,
|
|
subtitle,
|
|
actions,
|
|
children,
|
|
maxWidth = 'max-w-7xl',
|
|
backAction
|
|
}) => {
|
|
return (
|
|
<div className="p-4 md:p-8">
|
|
<div className={`${maxWidth} mx-auto`}>
|
|
{backAction && (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
|
|
className="mb-4"
|
|
>
|
|
{backAction}
|
|
</motion.div>
|
|
)}
|
|
|
|
<PageHeader
|
|
title={title}
|
|
subtitle={subtitle}
|
|
actions={actions}
|
|
/>
|
|
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardLayout;
|