refactor: separate top bar component

2026-09-02 19:31:04 +05:00
parent 11c4ccece4
commit 991fe69381
8 changed files with 178 additions and 149 deletions
@@ -0,0 +1,44 @@
+<script lang="ts">
+	let lang = $state("RU");
+
+	// TODO: change to sectioned dual buttons
+</script>
+
+<div class="lang" role="group" aria-label="Language">
+	<button
+		type="button"
+		class="lang-btn"
+		class:active={lang === "RU"}
+		onclick={() => (lang = "RU")}>RU</button
+	><span class="lang-div">/</span>
+	<button
+		type="button"
+		class="lang-btn"
+		class:active={lang === "EN"}
+		onclick={() => (lang = "EN")}>EN</button
+	>
+</div>
+
+<style>
+	.lang {
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--line);
+	}
+	.lang-btn {
+		border: 0;
+		background: transparent;
+		color: var(--muted);
+		font: 10px var(--font-mono);
+		padding: 6px 9px;
+		cursor: pointer;
+	}
+	.lang-div {
+		color: var(--foreground);
+		font-family: var(--font-sans);
+	}
+	.lang-btn.active {
+		background: var(--foreground);
+		color: var(--background);
+	}
+</style>