src/lib/components/icons/IconSettings.svelte

@@ -0,0 +1,8 @@
+<svg class="w-fit h-fit" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 17.5834C21.5523 17.5834 22 18.0311 22 18.5834V19.5834H1C0.447716 19.5834 0 19.1357 0 18.5834C0 18.0311 0.447715 17.5834 1 17.5834H21Z" fill="#122F62"/>
+    <path d="M21 10.5834C21.5523 10.5834 22 11.0311 22 11.5834V12.5834H1C0.447716 12.5834 0 12.1357 0 11.5834C0 11.0311 0.447715 10.5834 1 10.5834H21Z" fill="#122F62"/>
+    <path d="M21 3.08337C21.5523 3.08337 22 3.53109 22 4.08337V5.08337H1C0.447716 5.08337 0 4.63566 0 4.08337C0 3.53109 0.447715 3.08337 1 3.08337H21Z" fill="#122F62"/>
+    <circle cx="6.5" cy="3.75" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
+    <circle cx="15.5835" cy="11.0834" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
+    <circle cx="6.5" cy="18.4167" r="2.75" fill="white" stroke="#122F62" stroke-width="2"/>
+</svg>

src/lib/components/ui/button.svelte

@@ -1,11 +1,12 @@
 <script lang="ts" module>
-	import { ripple } from "$lib/actions/ripple";
-	import { cn, type WithElementRef } from "$lib/utils.js";
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+    import {ripple} from "$lib/actions/ripple";
+    import {cn, type WithElementRef} from "$lib/utils.js";
+    import type {HTMLAnchorAttributes, HTMLButtonAttributes} from "svelte/elements";
+    import {type VariantProps, tv} from "tailwind-variants";
+    import type {Component} from "svelte";
 
     export const buttonVariants = tv({
-		base: "relative overflow-hidden font-bold w-fit hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366]",
+        base: "relative overflow-hidden font-bold w-fit min-w-28 hover:not-disabled:cursor-pointer disabled:bg-[#E6E7EA] disabled:text-[#0B1F4366] inline-flex items-center justify-center gap-4",
         variants: {
             variant: {
                 primary: "bg-primary text-primary-foreground",
@@ -32,6 +33,7 @@
         WithElementRef<HTMLAnchorAttributes> & {
         variant?: ButtonVariant;
         size?: ButtonSize;
+        end?: Component;
     };
 </script>
 
@@ -40,6 +42,7 @@
         class: className,
         variant = "primary",
         size = "standard",
+        end,
         ref = $bindable(null),
         href = undefined,
         type = "button",
@@ -54,7 +57,7 @@
             use:ripple
             bind:this={ref}
             data-slot="button"
-			class={cn(buttonVariants({ variant, size }), className)}
+            class={cn("", buttonVariants({ variant, size }), className)}
             href={disabled ? undefined : href}
             aria-disabled={disabled}
             role={disabled ? "link" : undefined}
@@ -62,17 +65,25 @@
             {...restProps}
     >
         {@render children?.()}
+        {#if end}
+            {@const Icon = end}
+            <Icon/>
+        {/if}
     </a>
 {:else}
     <button
             use:ripple
             bind:this={ref}
             data-slot="button"
-			class={" " + cn(buttonVariants({ variant, size }), className)}
+            class={cn("inline-flex items-center justify-center gap-4", buttonVariants({ variant, size }), className)}
             {type}
             {disabled}
             {...restProps}
     >
         {@render children?.()}
+        {#if end}
+            {@const Icon = end}
+            <Icon/>
+        {/if}
     </button>
 {/if}