48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { useTheme } from '../../contexts';
|
|
import { TLogo } from '../common/TLogo';
|
|
import { ThemeToggle } from '../common/ThemeToggle';
|
|
|
|
export const Header: React.FC = () => {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<header
|
|
className="h-[72px] flex items-center justify-between sticky top-0 z-[100]"
|
|
style={{
|
|
padding: '0 48px',
|
|
borderBottom: `1px solid ${theme.border}`,
|
|
backgroundColor: theme.bg,
|
|
}}
|
|
>
|
|
<div className="flex items-center" style={{ gap: 20 }}>
|
|
<TLogo size={80} />
|
|
<div className="flex items-baseline" style={{ gap: 12 }}>
|
|
<span style={{ fontWeight: 700, fontSize: 20, letterSpacing: '-0.5px', color: theme.text }}>
|
|
T-Systems
|
|
</span>
|
|
<span style={{ fontWeight: 300, fontSize: 16, color: theme.text2 }}>
|
|
Regulation
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center" style={{ gap: 16 }}>
|
|
<ThemeToggle />
|
|
<div
|
|
className="flex items-center rounded-lg"
|
|
style={{
|
|
padding: '8px 16px',
|
|
gap: 8,
|
|
backgroundColor: theme.bgHover,
|
|
borderRadius: 8,
|
|
}}
|
|
>
|
|
<span className="mono" style={{ fontSize: 11, color: theme.text3 }}>v1.0.0</span>
|
|
<div style={{ width: 1, height: 12, background: theme.border }} />
|
|
<span className="mono" style={{ fontSize: 12, color: theme.green }}>● ONLINE</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|