ui changes and cs prices

src/routes/projects/progress/create/+page.svelte

@@ -1,10 +1,21 @@
-<form method="post" class="flex flex-col items-center gap-4">
-	<h1 class="font-bold text-xl mt-8 mb-4">Create Task</h1>
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+</script>
 
-	<div class="flex gap-4">
-		<label for="name">Name: </label>
-		<input type="text" name="name" class="border rounded" />
-	</div>
-
-	<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>
-</form>
+<div class="mx-auto max-w-xl space-y-6 px-4 py-12 sm:px-6">
+	<Button href={resolve('/projects/progress')} variant="ghost" size="sm">← All tasks</Button>
+	<Card.Root
+		><Card.Header><Card.Title>Create task</Card.Title></Card.Header><Card.Content
+			><form method="POST" class="space-y-4">
+				<div class="space-y-2">
+					<Label for="task-name">Name</Label><Input id="task-name" name="name" required />
+				</div>
+				<Button type="submit">Create</Button>
+			</form></Card.Content
+		></Card.Root
+	>
+</div>