89 lines
3 KiB
TypeScript
89 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>
|
|
);
|
|
};
|