feat: create PageTabs navigation component
This commit is contained in:
+32
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user