ffae46f906
- Updated package.json to replace Vite with React Router for development and build scripts. - Added react-router.config.ts for configuration settings. - Created a new App component with a dashboard layout including header, sidebar, and footer. - Enhanced App.css with a professional theme and responsive design. - Removed old App.tsx and index.css files. - Introduced RootLayout component to encapsulate layout structure. - Developed Header, Footer, and Sidebar components for consistent layout. - Implemented routes for home and dashboard with key metrics and activity sections. - Updated vite.config.ts to integrate React Router and adjust SSR settings.
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { Space, Avatar, Input, Button, Badge, Dropdown, Layout, type DropdownProps } from 'antd';
|
|
import { UserOutlined, SearchOutlined, BellOutlined, LogoutOutlined } from '@ant-design/icons';
|
|
const { Header } = Layout;
|
|
|
|
const userMenuItems: Exclude<DropdownProps['menu'], undefined>['items'] = [
|
|
{ key: 'profile', label: 'Profile' },
|
|
{ key: 'settings', label: 'Settings' },
|
|
{ type: 'divider' },
|
|
{ key: 'logout', label: 'Logout', icon: <LogoutOutlined /> },
|
|
];
|
|
|
|
export const LayoutHeader = () => {
|
|
return (
|
|
<Header
|
|
style={{
|
|
background: '#fff',
|
|
padding: '0 24px',
|
|
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
position: 'sticky',
|
|
top: 0,
|
|
zIndex: 999,
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
|
<h1 style={{ margin: 0, fontSize: '20px', fontWeight: 'bold', color: '#1890ff' }}>nxMesh</h1>
|
|
</div>
|
|
|
|
<Input placeholder="Search agents, workspaces..." prefix={<SearchOutlined />} style={{ width: '300px' }} />
|
|
|
|
<Space size="large">
|
|
<Badge count={3} style={{ backgroundColor: '#ff4d4f' }}>
|
|
<Button type="text" icon={<BellOutlined style={{ fontSize: '18px' }} />} />
|
|
</Badge>
|
|
<Dropdown menu={{ items: userMenuItems }} trigger={['click']}>
|
|
<Space style={{ cursor: 'pointer' }}>
|
|
<Avatar icon={<UserOutlined />} style={{ backgroundColor: '#1890ff' }} />
|
|
{/* TODO: from store */}
|
|
<span>Admin User</span>
|
|
</Space>
|
|
</Dropdown>
|
|
</Space>
|
|
</Header>
|
|
);
|
|
};
|