rewrite checkbox; fix github link

src/components/settings.svelte

@@ -91,7 +91,7 @@
 					Settings
 					<a
 						class="text-xs text-current"
-						href="https://github.com/0ql/Coffeetyper"
+						href="https://github.com/0ql/Coffeetyper-Svelte"
 						target="_blank"
 					>
 						Github

src/components/ui/checkbox.svelte

@@ -1,16 +1,33 @@
 <script lang="ts">
 	export let checked: boolean;
-
-	const onClick = (): void => {
-		checked = !checked;
-	};
 </script>
 
-<div
-	class="bg-[var(--sub-color)] w-[1rem] h-[1rem] rounded-full {$$props.class} flex justify-center items-center cursor-pointer"
-	on:click={onClick}
->
-	{#if checked === true}
-		<div class="w-[60%] h-[60%] bg-[var(--text-color)] rounded-full" />
-	{/if}
-</div>
+<input
+	type="checkbox"
+	class="{$$props.class}"
+	bind:checked
+/>
+
+<style>
+	input[type="checkbox"] {
+		appearance: none;
+		position: relative;
+		width: 1rem;
+		height: 1rem;
+		background: var(--sub-color);
+		border-radius: 10000px;
+		margin: 0;
+		padding: 0;
+		cursor: pointer;
+	}
+	input[type="checkbox"]:checked::before {
+		content: "";
+		background: var(--text-color);
+		position: absolute;
+		top: 0.2rem;
+		left: 0.2rem;
+		width: 0.6rem;
+		height: 0.6rem;
+		border-radius: 10000px;
+	}
+</style>