96 lines
2.5 KiB
Svelte
96 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import * as Dialog from '$lib/components/ui/dialog';
|
|
import { Button, buttonVariants } from '$lib/components/ui/button';
|
|
import { Input } from '$lib/components/ui/input';
|
|
import * as RadioGroup from '$lib/components/ui/radio-group';
|
|
import { Label } from '$lib/components/ui/label';
|
|
import * as Field from '$lib/components/ui/field';
|
|
import type { Item } from '$lib/types/item.server';
|
|
import NoImagePlaceholder from './no-image-placeholder.svelte';
|
|
import LocationIcon from '@lucide/svelte/icons/map-pinned';
|
|
import { EMAIL_REGEX_STRING } from '$lib/consts';
|
|
|
|
|
|
let { open = $bindable(), item }: { open: boolean, item: Item | undefined } = $props();
|
|
</script>
|
|
|
|
<Dialog.Root bind:open>
|
|
<Dialog.Content>
|
|
<Dialog.Header>
|
|
<Dialog.Title>Item Inquiry</Dialog.Title>
|
|
<Dialog.Description>
|
|
Have a question about an item? Ask here!
|
|
</Dialog.Description>
|
|
</Dialog.Header>
|
|
|
|
<form method="post" action="?/inquire">
|
|
<Field.Group>
|
|
<div class="flex gap-4">
|
|
|
|
{#if item?.image}
|
|
<img src="https://fbla26.marinodev.com/uploads/{item.id}.jpg"
|
|
class="object-cover max-w-48 max-h-48 rounded-2xl"
|
|
alt="Lost item">
|
|
{:else}
|
|
<div class="min-h-48 w-full bg-accent flex flex-col justify-center">
|
|
|
|
<div class="justify-center flex ">
|
|
|
|
<NoImagePlaceholder className="" />
|
|
</div>
|
|
<p class="text-center mt-4">No image available</p>
|
|
</div>
|
|
{/if}
|
|
<div class="inline-block">
|
|
<div class="flex-1">{item?.description}</div>
|
|
{#if item?.foundLocation}
|
|
<div class="mt-2">
|
|
<LocationIcon class="float-left mr-1" size={24} />
|
|
<div>{item?.foundLocation}</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<Field.Field>
|
|
<Field.Label for="description">
|
|
Please describe your inquiry <span class="text-error">*</span>
|
|
</Field.Label>
|
|
<Input
|
|
id="inquiry"
|
|
name="inquiry"
|
|
placeholder="Is there a ..."
|
|
maxlength={200}
|
|
required
|
|
/>
|
|
</Field.Field>
|
|
<Field.Field>
|
|
|
|
<Field.Label for="email">
|
|
Your Email <span class="text-error">*</span>
|
|
</Field.Label>
|
|
<Input
|
|
id="email"
|
|
name="email"
|
|
placeholder="name@domain.com"
|
|
pattern={EMAIL_REGEX_STRING}
|
|
required
|
|
/>
|
|
</Field.Field>
|
|
</Field.Group>
|
|
|
|
<Dialog.Footer class="mt-4">
|
|
<Dialog.Close
|
|
type="button"
|
|
class={buttonVariants({ variant: "outline" })}
|
|
>
|
|
Cancel
|
|
</Dialog.Close>
|
|
<Button type="submit">Submit</Button>
|
|
</Dialog.Footer>
|
|
</form>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|
|
|
|
|