53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import type { Page } from '../../common/types/component.types';
|
|
|
|
interface NavigationHeaderProps {
|
|
pages: Page[];
|
|
}
|
|
|
|
export const NavigationHeader: React.FC<NavigationHeaderProps> = ({ pages }) => {
|
|
const location = useLocation();
|
|
|
|
return (
|
|
<nav
|
|
style={{
|
|
backgroundColor: '#fff',
|
|
borderBottom: '1px solid #ddd',
|
|
padding: '12px 24px',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '16px',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
{pages.map((page) => {
|
|
const isActive = location.pathname === page.route;
|
|
return (
|
|
<Link
|
|
key={page.id}
|
|
to={page.route}
|
|
style={{
|
|
padding: '8px 16px',
|
|
textDecoration: 'none',
|
|
color: isActive ? '#007bff' : '#333',
|
|
backgroundColor: isActive ? '#e3f2fd' : 'transparent',
|
|
borderRadius: '4px',
|
|
fontWeight: isActive ? '600' : '400',
|
|
fontSize: '14px',
|
|
border: isActive ? '1px solid #007bff' : '1px solid transparent',
|
|
transition: 'all 0.2s',
|
|
}}
|
|
>
|
|
{page.name}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|