settings nav button :)

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.snippet.svelte

@@ -0,0 +1,10 @@
+<script context="module">
+import { LanguageSquareIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+
+export { icon };
+</script>
+
+{#snippet icon()}
+    <HugeiconsIcon size={30}  color="var(--color-black-500)" icon={LanguageSquareIcon} />
+{/snippet}

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.stories.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+import { icon } from "./SettingsNavigationBtn.stories.snippet.svelte";
+import SettingsNavigationBtn from "./SettingsNavigationBtn.svelte";
+
+export default {
+	title: "Fragments/SettingsNavigationBtn",
+	component: SettingsNavigationBtn,
+	tags: ["autodocs"],
+	render: (args: { icon: Snippet; label: string; onClick: () => void }) => ({
+		Component: SettingsNavigationBtn,
+		props: args,
+	}),
+};
+
+export const Primary = {
+	args: {
+		icon: icon,
+		label: "Language",
+		onClick: () => alert("asdf"),
+	},
+};

infrastructure/eid-wallet/src/lib/fragments/SettingsNavigationBtn/SettingsNavigationBtn.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { cn } from "$lib/utils";
+import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+interface ISettingsNavigationBtn extends HTMLAttributes<HTMLElement> {
+	icon: Snippet;
+	label: string;
+	onClick: () => void;
+}
+
+let { icon, label, onClick, ...restProps }: ISettingsNavigationBtn = $props();
+</script>
+
+<div {...restProps} class={cn('flex items-center justify-between px-3 py-2', restProps.class)} onclick={onClick}>
+    <div class="flex items-center gap-2">
+        <div class="p-3 bg-gray max-w-max rounded-4xl object-cover flex items-center" >
+            {@render icon?.()}
+        </div>
+        <h1>{label}</h1>
+    </div>
+    <HugeiconsIcon size={30}  color="var(--color-black-500)" icon={ArrowRight01Icon} />
+</div>

infrastructure/eid-wallet/src/lib/fragments/index.ts

@@ -1 +1,2 @@
 export { default as Header } from "./Header/Header.svelte";
+export { default as SettingsNavigationBtn } from "./SettingsNavigationBtn/SettingsNavigationBtn.svelte";

infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte

@@ -15,7 +15,6 @@ interface ISelectorProps extends HTMLLabelAttributes {
 	children?: Snippet;
 }
 
-// biome-ignore lint/style/useConst: selected is bindable, can't be a const
 let {
 	id,
 	name,