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