Browse Source

🚀 Added initial component structure.

📝 Added form elements and labels.
🛏️ Implemented property type selection.
🏠 Added place name input field.
🏡 Included rental form selection.
main
John Doe 1 year ago
parent
commit
3e216a140b
  1. 51
      src/app/add-listing/[[...stepIndex]]/PageAddListing1.tsx

51
src/app/add-listing/[[...stepIndex]]/PageAddListing1.tsx

@ -0,0 +1,51 @@
import React, { FC } from "react";
import Input from "@/shared/Input";
import Select from "@/shared/Select";
import FormItem from "../FormItem";
export interface PageAddListing1Props {}
const PageAddListing1: FC<PageAddListing1Props> = () => {
return (
<>
<h2 className="text-2xl font-semibold">Choosing listing categories</h2>
<div className="w-14 border-b border-neutral-200 dark:border-neutral-700"></div>
{/* FORM */}
<div className="space-y-8">
{/* ITEM */}
<FormItem
label="Choose a property type"
desc="Hotel: Professional hospitality businesses that usually have a unique style or theme defining their brand and decor"
>
<Select>
<option value="Hotel">Hotel</option>
<option value="Cottage">Cottage</option>
<option value="Villa">Villa</option>
<option value="Cabin">Cabin</option>
<option value="Farm stay">Farm stay</option>
<option value="Houseboat">Houseboat</option>
<option value="Lighthouse">Lighthouse</option>
</Select>
</FormItem>
<FormItem
label="Place name"
desc="A catchy name usually includes: House name + Room name + Featured property + Tourist destination"
>
<Input placeholder="Places name" />
</FormItem>
<FormItem
label="Rental form"
desc="Entire place: Guests have the whole place to themselves—there's a private entrance and no shared spaces. A bedroom, bathroom, and kitchen are usually included."
>
<Select>
<option value="Hotel">Entire place</option>
<option value="Private room">Private room</option>
<option value="Share room">Share room</option>
</Select>
</FormItem>
</div>
</>
);
};
export default PageAddListing1;
Loading…
Cancel
Save