Initial commit

src/renderer/components/Header.tsx

@@ -0,0 +1,32 @@
+import OctoLogo from '~renderer/assets/logo.png';
+
+import TextButton from './styled/TextButton';
+import { TabNames, type TabType } from './TabsPanel';
+
+type Props = {
+	activeTab?: TabType;
+	setActiveTab: (tab?: TabType) => void;
+};
+
+const Header = ({ activeTab, setActiveTab }: Props) => (
+	<div className="-mb-3 flex select-none items-center gap-1">
+		<button
+			onClick={() => setActiveTab(undefined)}
+			className="z-10 -my-3 mx-3 w-[180px] cursor-pointer"
+		>
+			<img src={OctoLogo} alt="OctoWoW" className="pointer-events-none" />
+		</button>
+		{TabNames.map(t => (
+			<TextButton
+				key={t}
+				onClick={() => setActiveTab(t)}
+				active={activeTab === t}
+				className="uppercase"
+			>
+				{t}
+			</TextButton>
+		))}
+	</div>
+);
+
+export default Header;