feat: create PageTabs navigation component

This commit is contained in:
gnezim
2026-04-05 20:52:24 +03:00
parent 12c2b36051
commit 509e1afb20
4 changed files with 90 additions and 0 deletions
+32
View File
@@ -0,0 +1,32 @@
# .NET
bin/
obj/
*.user
*.suo
.vs/
publish/
# Node / Angular
node_modules/
apps/angular/node_modules/
apps/react/node_modules/
dist/
.angular/
ClientApp/dist/
ClientApp/coverage/
ClientApp/.storybook-out/
# Logs
*.log
npm-debug.log*
# OS
.DS_Store
Thumbs.db
# Env / secrets
*.env
appsettings.Development.json
# wwwroot build output (keep static assets, ignore generated JS)
wwwroot/dist/
@@ -0,0 +1 @@
export { PageTabs } from './page-tabs'
@@ -0,0 +1,25 @@
.page-tabs {
display: flex;
gap: 10px;
border-bottom: 2px solid #e0e0e0;
margin-bottom: 20px;
}
.page-tabs__link {
padding: 12px 16px;
text-decoration: none;
color: #666;
font-weight: 500;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
color: #333;
}
&--active {
color: #1976d2;
border-bottom-color: #1976d2;
}
}
@@ -0,0 +1,32 @@
import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import './page-tabs.scss'
export const PageTabs: React.FC = () => {
const location = useLocation()
const { t } = useTranslation()
const tabs = [
{ path: '/onlineboard', label: 'SHARED.ONLINE_BOARD', testId: 'onlineboard-tab' },
{ path: '/schedule', label: 'SHARED.SCHEDULE', testId: 'schedule-tab' },
{ path: '/flights-map', label: 'SHARED.FLIGHTS_MAP', testId: 'flights-map-tab' },
]
const isActive = (path: string) => location.pathname.startsWith(path)
return (
<nav className="page-tabs" data-testid="page-tabs">
{tabs.map((tab) => (
<Link
key={tab.path}
to={tab.path}
className={`page-tabs__link ${isActive(tab.path) ? 'page-tabs__link--active' : ''}`}
data-testid={tab.testId}
>
{t(tab.label)}
</Link>
))}
</nav>
)
}