.

1 files changed, 55 insertions, 0 deletions

diff --git a/code/app/src/routes/(main)/(app)/projects/create/+page.svelte b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte
new file mode 100644
index 0000000..2b5e7bc
--- /dev/null
+++ b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { useSWR } from "sswr";
+    import { Input, TextArea, Combobox, Button } from "$lib/components";
+    import type { ProjectMember } from "$lib/models/projects/ProjectMember";
+    import LL from "$lib/i18n/i18n-svelte";
+
+    const formFields = {
+        name: {
+            value: "",
+            error: "",
+        },
+        description: {
+            value: "",
+            error: "",
+        },
+        start: {
+            value: "",
+            error: "",
+        },
+        stop: {
+            value: "",
+            error: "",
+        },
+        members: {
+            value: [] as Array<ProjectMember>,
+            error: "",
+        },
+        clear() {},
+    };
+    async function submit(event: Event) {
+        alert("Submitted");
+    }
+    const { data: members } = useSWR("projectMembers");
+</script>
+
+<h1>Create a new project</h1>
+<form on:submit|preventDefault={submit} class="max-w-md flex flex-col gap-2">
+    <Input label="Name" bind:value={formFields.name.value} errorText={formFields.name.error} required />
+    <TextArea label="Description" bind:value={formFields.description.value} errorText={formFields.description.error} />
+    <section class="grid grid-flow-row sm:grid-flow-col gap-2">
+        <Input type="date" label="Start" bind:value={formFields.start.value} errorText={formFields.start.error} />
+        <Input type="date" label="Stop" bind:value={formFields.stop.value} errorText={formFields.stop.error} />
+    </section>
+    <Combobox options={$members} label={$LL.app.members()}>
+        <svelte:fragment slot="no-records">
+            <h1>No members found</h1>
+            {#if !$members?.length}
+                <p>
+                    <a href="/users/create" class="link">Click here</a> to create your first user
+                </p>
+            {/if}
+        </svelte:fragment>
+    </Combobox>
+    <Button text={$LL.submit()} />
+</form>