54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
/**
|
|
* Billing Navigation Component
|
|
*
|
|
* Provides navigation between billing views.
|
|
* Simplified: Übersicht (Dashboard) + Daten (FormGeneratorTable view)
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import styles from './Billing.module.css';
|
|
|
|
export const BillingNav: React.FC = () => {
|
|
const navLinkStyle = (isActive: boolean) => ({
|
|
padding: '8px 16px',
|
|
textDecoration: 'none',
|
|
borderRadius: '4px',
|
|
backgroundColor: isActive ? 'var(--color-primary)' : 'transparent',
|
|
color: isActive ? 'white' : 'var(--color-text)',
|
|
fontWeight: isActive ? 600 : 400,
|
|
});
|
|
|
|
return (
|
|
<nav className={styles.billingNav} style={{
|
|
display: 'flex',
|
|
gap: '8px',
|
|
marginBottom: '24px',
|
|
borderBottom: '1px solid var(--color-border)',
|
|
paddingBottom: '8px'
|
|
}}>
|
|
<NavLink
|
|
to="/billing"
|
|
end
|
|
className={({ isActive }) =>
|
|
`${styles.navLink} ${isActive ? styles.navLinkActive : ''}`
|
|
}
|
|
style={({ isActive }) => navLinkStyle(isActive)}
|
|
>
|
|
Übersicht
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
to="/billing/transactions"
|
|
className={({ isActive }) =>
|
|
`${styles.navLink} ${isActive ? styles.navLinkActive : ''}`
|
|
}
|
|
style={({ isActive }) => navLinkStyle(isActive)}
|
|
>
|
|
Transaktionen
|
|
</NavLink>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default BillingNav;
|