Merge branch 'IMG-50-Create-Profile-Settings'

# Conflicts:
#	src/routes/dash/+page.svelte

src/lib/components/ui/profile/advancedsettings.svelte

@@ -0,0 +1 @@
+<h1>Advanced settings</h1>

src/lib/components/ui/profile/credits.svelte

@@ -0,0 +1 @@
+<h1>Credits</h1>

src/lib/components/ui/profile/profilesettings.svelte

@@ -0,0 +1,57 @@
+<script>
+    import { onMount } from 'svelte';
+    import deffaultProfile from '$lib/assets/images/deffaultProfile.png'
+
+    let profilePicture = deffaultProfile;
+    let username = 'John Doe';
+    let email = '[email protected]';
+    let password = '********';
+
+    onMount(() => {
+        // Fetch profile picture and user data from API
+        // and update the variables accordingly
+    });
+
+    function changeProfilePicture() {
+        // Logic to change the profile picture
+    }
+
+    function saveModifications() {
+        // Logic to save the modified username, email, and password
+    }
+</script>
+
+<div class="w-full">
+    <div class="bg-slate rounded">
+        <div class="flex items-center border-y-4 w-full p-5">
+            <div class="w-52 h-52 rounded-full overflow-hidden">
+                <!-- svelte-ignore a11y-img-redundant-alt -->
+                <img class="w-full h-full object-cover" src={profilePicture} alt="Profile Picture" />
+            </div>
+            <button class="ml-auto mt-auto bg-slate-500 text-slate py-2 px-4 rounded" on:click={changeProfilePicture}>
+                Change Profile Picture
+            </button>
+        </div>
+
+        <div class="mt-8 border-b-4 pb-5">
+            <div class="mb-4 ml-4 grid grid-cols-2 w-fit">
+                <label for="username" class="font-bold mb-2">Username</label>
+                <input type="text" id="username" class="p-2 rounded border border-slate text-slate-600" bind:value={username} />
+            </div>
+
+            <div class="mb-4 ml-4 grid grid-cols-2 w-fit">
+                <label for="email" class="font-bold mb-2">Email</label>
+                <input type="email" id="email" class="p-2 rounded border border-slate text-slate-600" bind:value={email} />
+            </div>
+
+            <div class="mb-4 ml-4 grid grid-cols-2 w-fit">
+                <label for="password" class="font-bold mb-2">Password</label>
+                <input type="password" id="password" class="p-2 rounded border border-slate text-slate-600" bind:value={password} />
+            </div>
+
+            <button class="bg-red-600 text-slate py-2 px-4 rounded ml-4" on:click={saveModifications}>
+                Save Modifications
+            </button>
+        </div>
+    </div>    
+</div>

src/lib/components/ui/profile/sidebar.svelte

@@ -0,0 +1,56 @@
+<script>
+    import Logo from "../logo/logo.svelte"
+    import Advancedsettings from "./advancedsettings.svelte";
+    import Credits from "./credits.svelte";
+    import Profilesettings from "./profilesettings.svelte";
+
+    export let activeTab = '';
+
+    const tabs = [
+        { id: 'profile', label: 'Profile' },
+        { id: 'advanced', label: 'Advanced' },
+        { id: 'upload', label: 'Upload' },
+        { id: 'credits', label: 'Credits' },
+    ];
+</script>
+
+<div class="">
+    <div class="flex h-screen">
+        <div class="w-1/6 bg-slate-700">
+            <div class="border-b-4 rounded-3xl flex m-2 pb-1">
+                <Logo />
+                <div class="mx-auto my-auto text-2xl">
+                    unideb.tech
+                </div>
+            </div> 
+            <ul class="py-4">
+                {#each tabs as tab}
+                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                    <li
+                        class="px-4 py-2 cursor-pointer hover:bg-gray-600"
+                        class:selected={activeTab === tab.id}
+                        on:click={() => activeTab = tab.id}
+                    >
+                        {tab.label}
+                    </li>
+                {/each}
+            </ul>
+        </div>
+
+        {#if activeTab === 'profile'}
+            <Profilesettings />
+        {:else if activeTab === 'advanced'}
+            <Advancedsettings />
+        {:else if activeTab === 'credits'}
+                <Credits />
+        {/if}
+    </div>
+</div>
+
+
+<style>
+    .selected {
+        background-color: #4299e1;
+    }
+</style>

src/routes/dash/settings/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import Sidebar from '$components/ui/profile/sidebar.svelte'
+
+</script>
+<slot />
+
+<Sidebar />
+