57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import { Layout, CheckCircle2, Calendar, BarChart2, Settings, Folder } from "lucide-react";
|
|
|
|
interface CourseEditorLayoutProps {
|
|
children: React.ReactNode;
|
|
activeTab: "outline" | "grading" | "calendar" | "analytics" | "settings" | "files";
|
|
}
|
|
|
|
export default function CourseEditorLayout({ children, activeTab }: CourseEditorLayoutProps) {
|
|
const { id } = useParams() as { id: string };
|
|
|
|
const tabs = [
|
|
{ key: "outline", label: "Outline", icon: Layout, href: `/courses/${id}` },
|
|
{ key: "grading", label: "Grading", icon: CheckCircle2, href: `/courses/${id}/grading` },
|
|
{ key: "calendar", label: "Calendar", icon: Calendar, href: `/courses/${id}/calendar` },
|
|
{ key: "analytics", label: "Analytics", icon: BarChart2, href: `/courses/${id}/analytics` },
|
|
{ key: "files", label: "Files & Uploads", icon: Folder, href: `/courses/${id}/files` },
|
|
{ key: "settings", label: "Settings", icon: Settings, href: `/courses/${id}/settings` },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Tabs Navigation */}
|
|
<div className="glass p-1">
|
|
<div className="flex border-b border-white/10">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const isActive = tab.key === activeTab;
|
|
return (
|
|
<Link
|
|
key={tab.key}
|
|
href={tab.href}
|
|
className={`flex items-center gap-2 px-6 py-4 text-sm font-medium transition-colors ${isActive
|
|
? "border-b-2 border-blue-500 bg-white/5"
|
|
: "text-gray-500 hover:text-white"
|
|
}`}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
{tab.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="space-y-6">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|