111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
import { useState } from "preact/hooks";
|
|
|
|
interface AddRentalDialogProps {
|
|
properties: any[];
|
|
onClose?: () => void;
|
|
}
|
|
|
|
export default function AddRentalDialog(
|
|
{ properties, onClose }: AddRentalDialogProps,
|
|
) {
|
|
const [form, setForm] = useState({
|
|
title: "",
|
|
address_1: "",
|
|
city: "",
|
|
state: "",
|
|
price: "",
|
|
image_url: "",
|
|
description: "",
|
|
});
|
|
|
|
return (
|
|
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 z-50">
|
|
<form
|
|
method="POST"
|
|
action="/rental-property"
|
|
class="bg-white p-6 rounded shadow-lg w-full max-w-md space-y-4"
|
|
>
|
|
<h3 class="text-xl font-bold mb-2">Add Rental Property</h3>
|
|
<input
|
|
name="properties"
|
|
type="hidden"
|
|
value={JSON.stringify(properties)}
|
|
/>
|
|
<input
|
|
name="title"
|
|
placeholder="Title"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={form.title}
|
|
onInput={(e) => setForm({ ...form, title: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="address_1"
|
|
placeholder="Address"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={form.address_1}
|
|
onInput={(e) =>
|
|
setForm({ ...form, address_1: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="city"
|
|
placeholder="City"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={form.city}
|
|
onInput={(e) => setForm({ ...form, city: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="state"
|
|
placeholder="State"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={form.state}
|
|
onInput={(e) => setForm({ ...form, state: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="price"
|
|
type="number"
|
|
placeholder="Price"
|
|
required
|
|
class="border p-2 rounded w-full"
|
|
value={form.price}
|
|
onInput={(e) => setForm({ ...form, price: e.currentTarget.value })}
|
|
/>
|
|
<input
|
|
name="image_url"
|
|
placeholder="Image URL"
|
|
class="border p-2 rounded w-full"
|
|
value={form.image_url}
|
|
onInput={(e) =>
|
|
setForm({ ...form, image_url: e.currentTarget.value })}
|
|
/>
|
|
<textarea
|
|
name="description"
|
|
placeholder="Description"
|
|
class="border p-2 rounded w-full"
|
|
value={form.description}
|
|
onInput={(e) =>
|
|
setForm({ ...form, description: e.currentTarget.value })}
|
|
/>
|
|
<div class="flex justify-end gap-2 mt-4">
|
|
<button
|
|
type="button"
|
|
class="px-4 py-2 rounded border"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-4 py-2 rounded bg-blue-600 text-white"
|
|
>
|
|
Create Rental
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|