Merge branch 'refactor/pages' into develop

abroudoux · Nov 16, 2024 · 4bd2f11 · 4bd2f11
2 parents 1f74108 + da85ca1
commit 4bd2f11
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 37 deletions.
diff --git a/src/lib/components/habits/SectionHabits.svelte b/src/lib/components/habits/SectionHabits.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
 
-	import SectionHabits from "$lib/components/habits/SectionHabits.svelte";
 	import SectionLayout from "$lib/components/layouts/SectionLayout.svelte";
 	import Loader from "$lib/components/global/Loader.svelte";
+	import ListHabits from "$lib/components/habits/ListHabits.svelte";
+	import CreateHabit from "$lib/components/habits/CreateHabitModal.svelte";
+	import ManageHabitsToggle from "$lib/components/habits/ManageHabitsToggle.svelte";
+	import ProgressBar from "$lib/components/habits/ProgressBar.svelte";
 
 	import { habitsData } from "$stores/habit.store";
 
@@ -17,14 +20,35 @@
 		setTimeout(() => {
 			habitsData.set(data.habits);
 			isLoading = false;
-		}, 100);
+		}, 50);
 	}
 </script>
 
 <SectionLayout>
 	{#if isLoading}
 		<Loader />
 	{:else}
-		<SectionHabits />
+		<section class="flex flex-col gap-8 w-full h-full">
+			{#if habitsData}
+				<div class="w-full flex flex-row justify-between items-center">
+					<h2 class="text-3xl font-semibold">Habits</h2>
+					<div class="flex flex-row items-center gap-4">
+						<ManageHabitsToggle />
+						<CreateHabit />
+					</div>
+				</div>
+				<ListHabits />
+				<div class="mt-auto">
+					<ProgressBar />
+				</div>
+			{:else}
+				<div class="w-full h-full flex items-center flex-col justify-center gap-8">
+					<h2 class="text-3xl font-semibold max-w-3xl text-center">
+						You have created any habits yet. Start your journey by select new daily challenges
+					</h2>
+					<CreateHabit />
+				</div>
+			{/if}
+		</section>
 	{/if}
 </SectionLayout>