guh download selection buttons work

Co-authored-by: sn <baiorett@koisu.ru>

src/lib/components/atoms/DownloadSelection.svelte

@@ -1,12 +1,16 @@
 <script>
-	export let kind = 'secondary';
-	$: type = 'button-' + kind;
+	import { createEventDispatcher } from 'svelte';
+
+	export let active = false;
+
 	export let href = '#';
+
+	const dispatch = createEventDispatcher();
 </script>
 
 <a {href}>
-	<button class={type}>
-			<slot/>
+	<button class:active on:click={() => dispatch('click')} >
+		<slot />
 	</button>
 </a>
 
@@ -14,16 +18,15 @@
 	a {
 		color: var(--white);
 		text-decoration: none;
-	} 
+	}
 
-	button,
-	.button-secondary {
+	button {
 		font-weight: 300;
-        height:60px;
-        width:20vw;
+		height: 60px;
+		width: 20vw;
 		color: var(--white);
 		border-radius: 200px;
-        border:0;
+		border: 0;
 		padding: 12px 40px;
 		cursor: pointer;
 		background-color: transparent;
@@ -33,13 +36,19 @@
 		user-select: none;
 	}
 
-	.button-primary {
+	button.active {
 		background-color: var(--red);
 		box-shadow: 0px 0px 32px 1px var(--red-glow);
+		font-weight: 600;
 	}
 
 	button:hover {
 		background-color: var(--grey-two);
-        font-weight:500;
+		font-weight: 400;
+	}
+
+	button.active:hover {
+		background-color: var(--red);
+		font-weight: 600;
 	}
 </style>

src/lib/components/atoms/Navigation.svelte

@@ -32,7 +32,7 @@
 	}
 
 	li:hover {
-		font-weight: 500;
+		font-weight: 600;
 		border: 3px solid var(--grey-two);
 		padding: 10px 30px;
 		border-radius: 200px;

src/lib/components/molecules/DownloadSelectionHost.svelte

@@ -1,12 +1,25 @@
 <script>
 	import DownloadSelection from '../atoms/DownloadSelection.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let items = ['Manager', 'CLI', 'Patches', 'Integrations'];
+
+	export let activeTab = 'Manager';
+
+	$: handleTabChange = (item) => {
+		activeTab = item;
+	};
 </script>
 
 <div class="download-selection">
-    <DownloadSelection>Manager</DownloadSelection>
-    <DownloadSelection>CLI</DownloadSelection>
-    <DownloadSelection>Patches</DownloadSelection>
-    <DownloadSelection>Integrations</DownloadSelection>
+	{#each items as item}
+		<DownloadSelection active={item === activeTab} 
+			on:click={handleTabChange(item)}>
+				{item}
+		</DownloadSelection>
+	{/each}
 </div>
 
 <style>
@@ -15,7 +28,6 @@
 		border-radius: 200px;
 		display: flex;
 		justify-content: space-between;
-
 		padding: 8px 8px;
 	}
 </style>