feat: setup drizzle (#594)

* chore: migration to SvelteKit 2

* stage 1: migrate to svelte 5 and fix rerendering issues

* stage 2: fix more $: reactivity across dashboard

* fix merge conflicts

* chore: migrate code in main to svelte 5

* chore: update preventDefault

* chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte

* chore: enforce .ts across dashboard

* rename from classroomio-com to website

* stage-3: Replace carbon icon svelte with lucide icon

* update lock file

* chore: finish icon replacement

* fix: settings and setup page multiple rerender

* stage 3: More icon and rerendering fixes

* feat: setup drizzle and better auth

* fix: onboarding validation error showing translation key #586 (#593)

* fix: onboarding validation error showing translation key #586

* fix: remove debug log for profile update errors

* chore: add a clean command

* fix: remove message from email verification response

apps/dashboard/src/lib/components/Tabs/index.svelte

@@ -2,14 +2,19 @@
   import TextChip from '$lib/components/Chip/Text.svelte';
   import { t } from '$lib/utils/functions/translations';
 
-  export let tabs: {
-    icon?: any;
-    label: string;
-    value: string | number;
-    badgeValue?: number;
-  }[] = [];
-  export let currentTab: string | number;
-  export let onChange = (v: string | number) => () => {};
+  interface Props {
+    tabs?: {
+      icon?: any;
+      label: string;
+      value: string | number;
+      badgeValue?: number;
+    }[];
+    currentTab: string | number;
+    onChange?: any;
+    content?: import('svelte').Snippet;
+  }
+
+  let { tabs = [], currentTab, onChange = (_v: string | number) => () => {}, content }: Props = $props();
 </script>
 
 <div class="flex w-full flex-col">
@@ -20,7 +25,7 @@
           class="relative {currentTab === tab.value
             ? 'text-primary-700'
             : 'dark:bg-gray-500 dark:text-white'} mr-4 w-fit px-2 py-3 text-center font-semibold focus:outline-none dark:bg-transparent"
-          on:click={onChange(tab.value)}
+          onclick={onChange(tab.value)}
         >
           <div class="flex w-full items-center justify-center text-center">
             {$t(tab.label)}
@@ -30,18 +35,18 @@
             tab.value
               ? 'w-full'
               : 'w-0'}"
-          />
+          ></span>
         </button>
       {:else}
         <button
           class="relative {currentTab === tab.value
             ? 'text-primary-700'
             : 'dark:bg-gray-500 dark:text-white'} mr-8 w-24 px-2 py-3 text-left font-semibold focus:outline-none dark:bg-transparent"
-          on:click={onChange(tab.value)}
+          onclick={onChange(tab.value)}
         >
-          <div class="grid grid-cols-5 items-center gap-5 md:grid-cols-4 md:gap-3">
+          <div class="flex items-center gap-1 md:grid-cols-4 md:gap-3">
             {#if tab.icon}
-              <svelte:component this={tab.icon} />
+              <tab.icon size={16} />
             {/if}
             {$t(tab.label)}
             {#if typeof tab.badgeValue === 'number'}
@@ -58,13 +63,13 @@
             tab.value
               ? 'w-full'
               : 'w-0'}"
-          />
+          ></span>
         </button>
       {/if}
     {/each}
   </div>
 
   <div class="mt-5">
-    <slot name="content" />
+    {@render content?.()}
   </div>
 </div>