50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
import { ReactNode, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { DEFAULT_NAV_ITEMS } from "./navItems";
|
|
import CourseEditorHeader from "./CourseEditorHeader";
|
|
import { motion } from "framer-motion";
|
|
import { NavItem } from "@nicestack/client"
|
|
import CourseEditorSidebar from "./CourseEditorSidebar";
|
|
interface CourseEditorLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
|
|
export default function CourseEditorLayout({ children }: CourseEditorLayoutProps) {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const [selectedSection, setSelectedSection] = useState<number>(0);
|
|
const [navItems, setNavItems] = useState<NavItem[]>(DEFAULT_NAV_ITEMS);
|
|
const navigate = useNavigate();
|
|
const handleNavigation = (item: NavItem, index: number) => {
|
|
setSelectedSection(index);
|
|
navigate(item.path);
|
|
};
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<CourseEditorHeader />
|
|
<div className="flex pt-16">
|
|
<CourseEditorSidebar
|
|
isHovered={isHovered}
|
|
setIsHovered={setIsHovered}
|
|
navItems={navItems}
|
|
selectedSection={selectedSection}
|
|
onNavigate={handleNavigation}
|
|
/>
|
|
<motion.main
|
|
animate={{ marginLeft: isHovered ? "16rem" : "5rem" }}
|
|
transition={{ type: "spring", stiffness: 200, damping: 25, mass: 1 }}
|
|
className="flex-1 p-8"
|
|
>
|
|
<div className="max-w-6xl mx-auto bg-white rounded-xl shadow-lg">
|
|
<header className="p-6 border-b border-gray-100">
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
{navItems[selectedSection]?.label}
|
|
</h1>
|
|
</header>
|
|
<div className="p-6">{children}</div>
|
|
</div>
|
|
</motion.main>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |