Lots of dev

2026-02-03 00:23:43 -06:00
parent 2c2b08aa1a
commit 4ea6549ac7
66 changed files with 2125 additions and 172 deletions
@@ -1,6 +1,111 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+	import { Button, buttonVariants } from '$lib/components/ui/button/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as Field from '$lib/components/ui/field/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import ImageUpload from '$lib/components/custom/image-upload/image-upload.svelte';
+	import type { PageProps } from './$types';
+	import { EMAIL_REGEX_STRING } from '$lib/consts';
+	import { genDescription } from './gen-desc.remote';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import { Label } from '$lib/components/ui/label';
+	import ItemListing from '$lib/components/custom/item-listing.svelte';
+
+	let itemLocation: string | undefined = $state('');
+	let foundLocation: string | undefined = $state();
+	let description: string | undefined = $state();
+	let isGenerating = $state(false);
+
+	async function onSelect() {
+		isGenerating = true;
+		description = await genDescription();
+		isGenerating = false;
+	}


+	let { data }: PageProps = $props();
+</script>
+
+<div class="max-w-7xl mx-auto px-4">
+	<div class="justify-between flex">
+		<h1 class="font-semibold text-4xl mb-4 mt-2">Found Items</h1>
+		<div class="inline-block">
+			<Dialog.Root>
+				<Dialog.Trigger class={buttonVariants({ variant: 'default' })} type="button"
+				>Post an item
+				</Dialog.Trigger
+				>
+				<Dialog.Content>
+					<Dialog.Header>
+						<Dialog.Title>Submit Found Item</Dialog.Title>
+						<Dialog.Description>
+							Your item will need to be approved before becoming public.
+						</Dialog.Description>
+					</Dialog.Header>
+					<form method="post" action="?/create" enctype="multipart/form-data">
+						<Field.Group>
+							<ImageUpload onSelect={onSelect} required={true} />
+							<Field.Field>
+								<Field.Label for="description">
+									Description<span class="text-error">*</span>
+								</Field.Label>
+								<Input id="description" name="description" bind:value={description}
+											 placeholder="A red leather book bag..."
+											 required />
+							</Field.Field>
+							<Field.Field>
+								<Field.Label for="foundLocation">
+									Where did you find it?
+								</Field.Label>
+								<Input id="foundLocation" name="foundLocation" bind:value={foundLocation}
+											 placeholder="By the tennis courts." required />
+							</Field.Field>
+							<RadioGroup.Root name="location" bind:value={itemLocation}>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="finderPossession" id="finderPossession" />
+									<Label for="finderPossession">I still have the item.</Label>
+								</div>
+								<div class="flex items-center space-x-2">
+									<RadioGroup.Item value="turnedIn" id="turnedIn" />
+									<Label for="turnedIn">I turned the item in to the school lost and found.</Label>
+								</div>
+							</RadioGroup.Root>
+							<Field.Field class={itemLocation !== 'finderPossession' ? 'disabled hidden' : ''}>
+								<Field.Label for="email">
+									Your Email
+								</Field.Label>
+								<Input id="email" name="email" placeholder="name@domain.com"
+											 class={itemLocation !== 'finderPossession' ? 'disabled' : ''} pattern={EMAIL_REGEX_STRING}
+											 required={itemLocation === 'finderPossesion'} />
+								<!--				<Field.Error>Enter a valid email address.</Field.Error>-->
+							</Field.Field>
+						</Field.Group>
+
+						<Dialog.Footer class="mt-4">
+							<Dialog.Close class={buttonVariants({ variant: "outline" })} type="button"
+							>Cancel
+							</Dialog.Close
+							>
+							<Button type="submit">Submit</Button>
+						</Dialog.Footer>
+					</form>
+				</Dialog.Content>
+			</Dialog.Root>
+		</div>
+	</div>
+
+	<div class="justify-start grid gap-4 grid-cols-[repeat(auto-fill,minmax(16rem,max-content))]">
+		{#each data.items as item (item.id)}
+			<ItemListing item={item} />
+		{/each}
+
+	</div>
+</div>


+{#if isGenerating}
+	<div class="fixed inset-0 bg-black/75 z-999999 w-screen h-screen justify-center items-center flex">
+		<p class="text-6xl text-primary">Loading...</p>
+	</div>
+{/if}
+