170 lines
8.4 KiB
TypeScript
170 lines
8.4 KiB
TypeScript
/**
|
|
* File: layout.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-11-29
|
|
* Purpose: Dashboard layout for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
import Link from 'next/link';
|
|
import { ReactNode } from 'react';
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-navy-900 via-navy-800 to-gray-900">
|
|
{/* Background overlay */}
|
|
<div className="absolute inset-0 bg-black/20"></div>
|
|
|
|
<div className="relative z-10 flex min-h-screen">
|
|
{/* Sidebar */}
|
|
<div className="w-64 bg-navy-900/50 backdrop-blur-sm border-r border-white/10">
|
|
<div className="p-6">
|
|
{/* Logo */}
|
|
<Link href="/dashboard" className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 bg-gold-400 rounded-lg flex items-center justify-center">
|
|
<span className="text-navy-900 font-bold text-sm">kV</span>
|
|
</div>
|
|
<span className="text-white font-bold text-xl">
|
|
kreati<span className="text-gold-400">Vortex</span>
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="px-4 pb-6">
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link
|
|
href="/dashboard"
|
|
className="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 00-1-1v-4a1 1 0 011-1h2m4 0a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
|
</svg>
|
|
<span>Beranda</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/dashboard/teori"
|
|
className="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
</svg>
|
|
<span>Teori</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/dashboard/praktik"
|
|
className="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
<span>Praktik</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/dashboard/template-makalah"
|
|
className="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<span>Template Makalah</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
{/* Additional sections */}
|
|
<div className="mt-8">
|
|
<h3 className="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
|
Komunitas
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link
|
|
href="/dashboard/videos"
|
|
className="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
|
</svg>
|
|
<span>Video Saya</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/dashboard/forum"
|
|
className="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
|
|
</svg>
|
|
<span>Forum</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/dashboard/assignments"
|
|
className="flex items-center space-x-3 px-4 py-3 text-gray-300 hover:text-white hover:bg-white/10 rounded-lg transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2v2a2 2 0 01-2 2M9 5a2 2 0 012-2v2a2 2 0 01-2 2m-3 7h8m-8 4h8m-8 4h8" />
|
|
</svg>
|
|
<span>Tugas</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 overflow-auto">
|
|
{/* Top bar */}
|
|
<header className="bg-navy-800/50 backdrop-blur-sm border-b border-white/10 px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-xl font-semibold text-white">
|
|
Dashboard
|
|
</h1>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
{/* Notifications */}
|
|
<button className="relative p-2 text-gray-300 hover:text-white transition-colors">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 10v6.159c0 .538.214 1.055.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
<span className="absolute top-1 right-1 w-2 h-2 bg-gold-400 rounded-full"></span>
|
|
</button>
|
|
|
|
{/* Profile */}
|
|
<div className="flex items-center space-x-3">
|
|
<div className="text-right">
|
|
<p className="text-sm font-medium text-white">John Doe</p>
|
|
<p className="text-xs text-gray-400">Calon Pendidik</p>
|
|
</div>
|
|
<div className="w-10 h-10 bg-gold-400 rounded-full flex items-center justify-center">
|
|
<span className="text-navy-900 font-semibold">JD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Page content */}
|
|
<main className="p-6">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |