58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Layout, Menu } from 'antd';
|
|
import { UserOutlined, TeamOutlined, AppstoreOutlined } from '@ant-design/icons';
|
|
import { Routes, Route, useNavigate } from 'react-router-dom';
|
|
import UserManagement from './UserManagement';
|
|
import RoleManagement from './RoleManagement';
|
|
import CategoryManagement from './CategoryManagement';
|
|
|
|
const { Content, Sider } = Layout;
|
|
|
|
const AdminPanel: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const menuItems = [
|
|
{
|
|
key: 'users',
|
|
icon: <UserOutlined />,
|
|
label: 'Пользователи',
|
|
onClick: () => navigate('/admin/users')
|
|
},
|
|
{
|
|
key: 'roles',
|
|
icon: <TeamOutlined />,
|
|
label: 'Роли и разрешения',
|
|
onClick: () => navigate('/admin/roles')
|
|
},
|
|
{
|
|
key: 'categories',
|
|
icon: <AppstoreOutlined />,
|
|
label: 'Категории',
|
|
onClick: () => navigate('/admin/categories')
|
|
}
|
|
];
|
|
|
|
return (
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
<Sider width={250} theme="light">
|
|
<Menu
|
|
mode="inline"
|
|
defaultSelectedKeys={['users']}
|
|
style={{ height: '100%', borderRight: 0 }}
|
|
items={menuItems}
|
|
/>
|
|
</Sider>
|
|
<Layout style={{ padding: '24px' }}>
|
|
<Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
|
|
<Routes>
|
|
<Route path="users" element={<UserManagement />} />
|
|
<Route path="roles" element={<RoleManagement />} />
|
|
<Route path="categories" element={<CategoryManagement />} />
|
|
</Routes>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default AdminPanel;
|