Initial commit: Set up Garmin Health Lab project structure
- Initialize monorepo with root workspace configuration - Set up Express.js backend with TypeScript - Set up React 18 frontend with TypeScript - Create database schema with SQLite - Implement project architecture and documentation - Add development and deployment guidelines Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
58
client/src/components/Layout.tsx
Normal file
58
client/src/components/Layout.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import './Layout.css';
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
function Layout({ children }: LayoutProps) {
|
||||
const location = useLocation();
|
||||
|
||||
const navigationItems = [
|
||||
{ path: '/', label: '仪表板', icon: '📊' },
|
||||
{ path: '/sync', label: '数据同步', icon: '🔄' },
|
||||
{ path: '/analysis', label: '数据分析', icon: '📈' },
|
||||
{ path: '/recommendations', label: '健康建议', icon: '💡' },
|
||||
{ path: '/settings', label: '设置', icon: '⚙️' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="layout">
|
||||
<header className="header">
|
||||
<div className="header-content">
|
||||
<h1 className="logo">🏃 Garmin Health Lab</h1>
|
||||
<p className="tagline">佳明健康数据分析平台</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="container">
|
||||
<nav className="sidebar">
|
||||
<ul className="nav-list">
|
||||
{navigationItems.map(item => (
|
||||
<li key={item.path}>
|
||||
<Link
|
||||
to={item.path}
|
||||
className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
|
||||
>
|
||||
<span className="icon">{item.icon}</span>
|
||||
<span className="label">{item.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main className="content">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer className="footer">
|
||||
<p>© 2024 Garmin Health Lab. All rights reserved.</p>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
Reference in New Issue
Block a user