feat: projects

src/lib/view.svelte.ts

@@ -0,0 +1,25 @@
+let view = $state('Projekt');
+
+let projects = $state([
+	{ name: 'TODO App', status: 80, uuid: '87cf4671-e0bb-425f-9332-4900ff97ebac' },
+	{ name: 'Weather Dashboard', status: 50, uuid: 'a12f3c4d-5678-4e90-b123-4567fghijklm' },
+	{ name: 'Expense Tracker', status: 30, uuid: 'b34g5h6i-7890-4j12-c345-6789lmnopqrs' },
+	{ name: 'Chat Application', status: 70, uuid: 'c56h7i8j-9012-4k34-d567-8901stuvwxyz' },
+	{ name: 'Recipe Finder', status: 20, uuid: 'd78i9j0k-1234-4l56-e789-0123abcdefg' },
+	{ name: 'Portfolio Website', status: 90, uuid: 'e90j1k2l-3456-4m78-f901-2345hijklmn' }
+]);
+
+export const state = {
+	get view() {
+		return view;
+	},
+	set view(v: string) {
+		view = v;
+	},
+	get projects() {
+		return projects;
+	},
+	set projects(v) {
+		projects = v;
+	}
+};

src/routes/+layout.svelte

@@ -1,25 +1,36 @@
 <script lang="ts">
+	import { views } from '$lib/artefact';
+	import { state } from '$lib/view.svelte';
 	import '../app.css';
-	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
+	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Select } from 'flowbite-svelte';
 	let { children } = $props();
 </script>
 
-<svelte:head></svelte:head>
+<!-- <svelte:head>Repo Mod</svelte:head> -->
+
+<Navbar>
+	<NavBrand href="/">
+		<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Repo Mod</span
+		>
+	</NavBrand>
+
+	<NavHamburger />
+	<NavUl>
+		<Select
+			value={state.view}
+			items={views.map((value) => ({
+				value,
+				name: value
+			}))}
+		/>
 
-<!-- <Navbar> -->
-<!-- 	<NavBrand href="/"> -->
-<!-- 		<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">ArchRepo</span -->
-<!-- 		> -->
-<!-- 	</NavBrand> -->
-<!-- 	<NavHamburger /> -->
-<!-- 	<NavUl> -->
 		<!-- 	<NavLi href="/">Home</NavLi> -->
 		<!-- 	<NavLi href="/about">About</NavLi> -->
 		<!-- 	<NavLi href="/docs/components/navbar">Navbar</NavLi> -->
 		<!-- 	<NavLi href="/pricing">Pricing</NavLi> -->
 		<!-- 	<NavLi href="/contact">Contact</NavLi> -->
-<!-- 	</NavUl> -->
-<!-- </Navbar> -->
+	</NavUl>
+</Navbar>
 
 <main class="mx-10 mt-5 xl:mx-44">
 	{@render children?.()}

src/routes/+page.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { views } from '$lib/artefact';
-	import ArtefactsView from '$lib/components/ArtefactsView.svelte';
-	import { Tabs, TabItem } from 'flowbite-svelte';
+	import { state } from '$lib/view.svelte';
+	import { Card, Button } from 'flowbite-svelte';
 </script>
 
-<h1>Project Overview: TODO app</h1>
+<div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+	{#each state.projects as project (project.uuid)}
+		<Card class="flex min-w-full flex-col  gap-5 p-5">
+			<h1 class="col-span-2 break-words hyphens-auto">{project.name}</h1>
 
-<Tabs>
-	{#each views as view, id}
-		<TabItem open={id === 1} title={view}>
-			<ArtefactsView {view} />
-		</TabItem>
+			<p class={`flex items-center justify-center rounded-3xl p-2 `}>
+				{project.status}%
+			</p>
+			<Button href={`/project/${project.uuid}`}>Edit</Button>
+		</Card>
 	{/each}
-</Tabs>
+</div>

src/routes/project/[project]/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import ArtefactsView from '$lib/components/ArtefactsView.svelte';
+	import { page } from '$app/stores';
+	import { state } from '$lib/view.svelte';
+	let project = state.projects.find(({ uuid }) => $page.params.project == uuid);
+</script>
+
+<h1>Project Overview: {project?.name}</h1>
+<ArtefactsView view={state.view} />