70 lines
3 KiB
TypeScript
70 lines
3 KiB
TypeScript
|
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { AdminDashboardView } from '../admin/AdminDashboardView';
|
||
|
|
import { AdminUsersView } from '../admin/AdminUsersView';
|
||
|
|
import { AdminModerationView } from '../admin/AdminModerationView';
|
||
|
|
import { AdminSettingsView } from '../admin/AdminSettingsView';
|
||
|
|
import { LayoutDashboard, Users, ShieldAlert, Settings } from 'lucide-react';
|
||
|
|
|
||
|
|
interface AdminViewProps {
|
||
|
|
currentSubView?: string; // 'dashboard' | 'users' | 'moderation' | 'settings'
|
||
|
|
}
|
||
|
|
|
||
|
|
export const AdminView: React.FC<AdminViewProps> = ({ currentSubView = 'dashboard' }) => {
|
||
|
|
// Local state for internal navigation if not driven by props, but props is better for deep linking simulation
|
||
|
|
const [activeTab, setActiveTab] = useState(currentSubView);
|
||
|
|
|
||
|
|
const renderContent = () => {
|
||
|
|
switch(activeTab) {
|
||
|
|
case 'users': return <AdminUsersView />;
|
||
|
|
case 'moderation': return <AdminModerationView />;
|
||
|
|
case 'settings': return <AdminSettingsView />;
|
||
|
|
case 'dashboard':
|
||
|
|
default: return <AdminDashboardView />;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col lg:flex-row gap-8 animate-fadeIn h-[calc(100vh-140px)]">
|
||
|
|
|
||
|
|
{/* Admin Sidebar */}
|
||
|
|
<div className="w-full lg:w-64 flex-shrink-0">
|
||
|
|
<div className="bg-kodo-red/10 border border-kodo-red/30 p-4 rounded-xl mb-6 flex items-center gap-3">
|
||
|
|
<ShieldAlert className="w-6 h-6 text-kodo-red" />
|
||
|
|
<div>
|
||
|
|
<h3 className="font-bold text-white text-sm">Admin Area</h3>
|
||
|
|
<p className="text-[10px] text-gray-400">Restricted Access</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-1">
|
||
|
|
{[
|
||
|
|
{ id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-4 h-4" /> },
|
||
|
|
{ id: 'users', label: 'Users', icon: <Users className="w-4 h-4" /> },
|
||
|
|
{ id: 'moderation', label: 'Moderation', icon: <ShieldAlert className="w-4 h-4" /> },
|
||
|
|
{ id: 'settings', label: 'Settings', icon: <Settings className="w-4 h-4" /> },
|
||
|
|
].map(item => (
|
||
|
|
<button
|
||
|
|
key={item.id}
|
||
|
|
onClick={() => setActiveTab(item.id)}
|
||
|
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all ${
|
||
|
|
activeTab === item.id
|
||
|
|
? 'bg-white/10 text-white border-l-2 border-kodo-red'
|
||
|
|
: 'text-gray-400 hover:text-white hover:bg-white/5 border-l-2 border-transparent'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{item.icon}
|
||
|
|
{item.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content Area */}
|
||
|
|
<div className="flex-1 overflow-y-auto pr-2 pb-10 custom-scrollbar">
|
||
|
|
{renderContent()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|