101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import type { DesignTheme } from './designTheme';
|
|
|
|
export type DesignTab = 'foundations' | 'components';
|
|
|
|
interface DesignHeaderProps {
|
|
activeTab: DesignTab;
|
|
onTabChange: (tab: DesignTab) => void;
|
|
theme: DesignTheme;
|
|
onThemeToggle: () => void;
|
|
}
|
|
|
|
const TABS: { label: string; id: DesignTab }[] = [
|
|
{ label: 'Foundations', id: 'foundations' },
|
|
{ label: 'Components', id: 'components' },
|
|
];
|
|
|
|
export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: DesignHeaderProps) => {
|
|
const isDark = theme.mode === 'dark';
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<header
|
|
className="h-16 px-8 flex flex-row items-center justify-between shrink-0 border-b border-solid"
|
|
style={{
|
|
backgroundColor: theme.headerBg,
|
|
borderColor: theme.headerBorder,
|
|
}}
|
|
>
|
|
{/* 좌측: 로고 + 버전 뱃지 */}
|
|
<div className="flex flex-row items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate('/')}
|
|
className="font-sans text-2xl leading-8 font-bold bg-transparent border-none p-0 cursor-pointer transition-opacity hover:opacity-70"
|
|
style={{ letterSpacing: '2.4px', color: theme.textAccent }}
|
|
>
|
|
WING-OPS
|
|
</button>
|
|
<div
|
|
className="rounded-sm border border-solid py-1 px-2"
|
|
style={{
|
|
backgroundColor: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
|
|
borderColor: isDark ? 'rgba(255,255,255,0.10)' : '#e2e8f0',
|
|
}}
|
|
>
|
|
<span
|
|
className="font-sans text-[10px] leading-[15px] uppercase"
|
|
style={{ letterSpacing: '2px', color: theme.textMuted }}
|
|
>
|
|
Design System v1.0
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 중앙: 탭 네비게이션 */}
|
|
<nav className="flex flex-row gap-8">
|
|
{TABS.map(({ label, id }) => {
|
|
const isActive = activeTab === id;
|
|
|
|
return (
|
|
<button
|
|
key={label}
|
|
type="button"
|
|
onClick={() => onTabChange(id)}
|
|
className={`font-sans text-base leading-6 bg-transparent cursor-pointer ${
|
|
isActive ? 'font-bold border-b-2 pb-1' : 'font-medium border-none'
|
|
}`}
|
|
style={{
|
|
letterSpacing: '-0.4px',
|
|
color: isActive ? theme.textAccent : theme.textMuted,
|
|
borderColor: isActive ? theme.textAccent : 'transparent',
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* 우측: 테마 토글 */}
|
|
<div className="flex flex-row items-center">
|
|
<button
|
|
type="button"
|
|
onClick={onThemeToggle}
|
|
className="w-10 h-10 rounded-md border border-solid flex items-center justify-center cursor-pointer"
|
|
style={{
|
|
backgroundColor: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
|
|
borderColor: isDark ? 'rgba(255,255,255,0.10)' : '#e2e8f0',
|
|
}}
|
|
title={isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
|
|
>
|
|
<span className="text-lg">{isDark ? '☀️' : '🌙'}</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default DesignHeader;
|