add header component

src/App.tsx

@@ -0,0 +1,10 @@
+import "@styles/App.scss";
+import Header from "@components/Header";
+
+export default function App() {
+	return (
+		<div id="app">
+			<Header />
+		</div>
+	);
+}

src/components/Header.tsx

@@ -0,0 +1,18 @@
+import "@styles/Header.scss";
+export default function Header() {
+	return (
+		<header className="header">
+			<div className="logo">brandname</div>
+			<div className="links">
+				<a href="">Link1</a>
+				<a href="">Link2</a>
+				<a href="">Link3</a>
+				<a href="">Link4</a>
+			</div>
+			<div className="control">
+				<div>Theme</div>
+				<div>Language</div>
+			</div>
+		</header>
+	);
+}

src/main.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./pages/App.tsx";
+import App from "./App.tsx";
 import "@styles/index.scss";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(

src/pages/App.tsx

@@ -1,7 +0,0 @@
-import "@styles/App.scss";
-
-function App() {
-	return <>Test</>;
-}
-
-export default App;

src/styles/App.scss

@@ -0,0 +1,4 @@
+#app {
+	display: flex;
+	flex-direction: column;
+}

src/styles/Header.scss

@@ -0,0 +1,42 @@
+.header {
+	padding: 1rem 2rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 5rem;
+	flex-direction: row;
+
+	.logo {
+		flex: 0.5;
+	}
+
+	.links {
+		flex: 1;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-around;
+
+		a {
+			margin-left: 1rem;
+			text-decoration: none;
+			color: #323232;
+			font-weight: 600;
+			font-size: 1.2rem;
+			transition: all 0.1s ease-in-out;
+			border-bottom: 3px solid transparent;
+
+			&:hover {
+				color: #000000;
+				border-color: #000000;
+			}
+		}
+	}
+
+	.control {
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		flex: 0.5;
+	}
+}

src/styles/index.scss

@@ -13,3 +13,9 @@
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-text-size-adjust: 100%;
 }
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}