feat: update profile page

Signed-off-by: Arthur Broudoux <[email protected]>

src/components/layouts/Section.svelte

@@ -1,5 +1,9 @@
-<script lang="ts"></script>
+<script lang="ts">
+	import clsx from "clsx";
 
-<section class="w-full h-full p-6 mt-2">
+	export let classes: string = "";
+</script>
+
+<section class={clsx("w-full h-full p-8", classes)}>
 	<slot />
 </section>

src/routes/profile/+layout.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Section from "$components/layouts/Section.svelte";
+</script>
+
+<Section classes="w-full h-full flex flex-col gap-8">
+	<h2 class="text-3xl font-semibold">Settings</h2>
+	<div class="w-full flex flex-row items-start justify-between gap-8">
+		<nav
+			class="text-muted-foreground grid gap-4 text-sm"
+			data-x-chunk-name="dashboard-04-chunk-0"
+			data-x-chunk-description="A sidebar navigation with links to general, security, integrations, support, organizations, and advanced settings."
+			data-x-chunk-container="chunk-container after:right-0"
+		>
+			<a href="##" class="text-primary font-semibold">General</a>
+			<a href="##">Security</a>
+			<a href="##">Integrations</a>
+			<a href="##">Support</a>
+			<a href="##">Organizations</a>
+			<a href="##">Advanced</a>
+		</nav>
+		<slot />
+	</div>
+</Section>

src/routes/profile/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import * as Card from "$lib/components/ui/card/index";
+	import { Input } from "$lib/components/ui/input/index";
+	import { Button } from "$lib/components/ui/button/index";
+	import { Checkbox } from "$lib/components/ui/checkbox/index";
+</script>
+
+<div class="flex flex-col gap-6 w-full">
+	<Card.Root
+		data-x-chunk-name="dashboard-04-chunk-1"
+		data-x-chunk-description="A form to update the store name."
+	>
+		<Card.Header>
+			<Card.Title>Store Name</Card.Title>
+			<Card.Description>Used to identify your store in the marketplace.</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<form>
+				<Input placeholder="Store Name" />
+			</form>
+		</Card.Content>
+		<Card.Footer class="border-t px-6 py-4">
+			<Button>Save</Button>
+		</Card.Footer>
+	</Card.Root>
+	<Card.Root
+		data-x-chunk-name="dashboard-04-chunk-2"
+		data-x-chunk-description="A form to update the plugins directory with a checkbox to allow administrators to change the directory."
+	>
+		<Card.Header>
+			<Card.Title>Plugins Directory</Card.Title>
+			<Card.Description>
+				The directory within your project, in which your plugins are located.
+			</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<form class="flex flex-col gap-4">
+				<Input placeholder="Project Name" value="/content/plugins" />
+				<div class="flex items-center space-x-2">
+					<Checkbox id="include" checked={true} />
+					<label
+						for="include"
+						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+					>
+						Allow administrators to change the directory.
+					</label>
+				</div>
+			</form>
+		</Card.Content>
+		<Card.Footer class="border-t px-6 py-4">
+			<Button>Save</Button>
+		</Card.Footer>
+	</Card.Root>
+</div>

src/routes/trainings/+layout.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
 	import Section from "$components/layouts/Section.svelte";
-	import SectionTrainings from "$components/trainings/SectionTrainings.svelte";
+	import CreateTrainingModal from "$components/trainings/CreateTrainingModal.svelte";
+	import CalendarCarousel from "$components/global/calendar/CalendarCarousel.svelte";
+
+	import type { Training } from "$utils/types/entities";
+	import { trainingsDataTest } from "$utils/constants";
+
+	// $: trainings = $trainingsData as Training[];
 </script>
 
 <Section>
-	<SectionTrainings />
+	<div class="flex flex-col gap-8 w-full h-auto">
+		<div class="w-full flex flex-row justify-between items-center">
+			<h2 class="text-3xl font-semibold">Trainings</h2>
+			<div class="flex flex-row items-center gap-4">
+				<CreateTrainingModal />
+			</div>
+		</div>
+		<CalendarCarousel data={trainingsDataTest} />
+	</div>
 	<div class="h-full w-full py-4">
 		<slot />
 	</div>

src/utils/constants.ts

@@ -1,5 +1,5 @@
 import type { SvelteComponent } from "svelte";
-import { House, Medal } from "lucide-svelte";
+import { House, Medal, User } from "lucide-svelte";
 
 import type { MenuItemSidebar } from "$utils/types/interfaces";
 import type { Habit, Training } from "$utils/types/entities";
@@ -15,6 +15,11 @@ export const menuItemsSidebar: MenuItemSidebar[] = [
 		url: "/trainings",
 		icon: Medal as typeof SvelteComponent
 	}
+	// {
+	// 	label: "Profile",
+	// 	url: "/profile",
+	// 	icon: User as typeof SvelteComponent
+	// }
 ];
 
 export const habitsDataTest: Habit[] = [