Get session user and add property
This commit is contained in:
Brad Traversy
@@ -0,0 +1,407 @@
|
||||
'use client';
|
||||
import addProperty from '@/app/actions/addProperty';
|
||||
|
||||
const PropertyAddForm = () => {
|
||||
return (
|
||||
<form action={addProperty}>
|
||||
<h2 className='text-3xl text-center font-semibold mb-6'>Add Property</h2>
|
||||
|
||||
<div className='mb-4'>
|
||||
<label htmlFor='type' className='block text-gray-700 font-bold mb-2'>
|
||||
Property Type
|
||||
</label>
|
||||
<select
|
||||
id='type'
|
||||
name='type'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
required
|
||||
>
|
||||
<option value='Apartment'>Apartment</option>
|
||||
<option value='Condo'>Condo</option>
|
||||
<option value='House'>House</option>
|
||||
<option value='CabinOrCottage'>Cabin or Cottage</option>
|
||||
<option value='Room'>Room</option>
|
||||
<option value='Studio'>Studio</option>
|
||||
<option value='Other'>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='mb-4'>
|
||||
<label className='block text-gray-700 font-bold mb-2'>
|
||||
Listing Name
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
id='name'
|
||||
name='name'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='eg. Beautiful Apartment In Miami'
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-4'>
|
||||
<label
|
||||
htmlFor='description'
|
||||
className='block text-gray-700 font-bold mb-2'
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<textarea
|
||||
id='description'
|
||||
name='description'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
rows='4'
|
||||
placeholder='Add an optional description of your property'
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className='mb-4 bg-blue-50 p-4'>
|
||||
<label className='block text-gray-700 font-bold mb-2'>Location</label>
|
||||
<input
|
||||
type='text'
|
||||
id='street'
|
||||
name='location.street'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='Street'
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
id='city'
|
||||
name='location.city'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='City'
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
id='state'
|
||||
name='location.state'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='State'
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type='text'
|
||||
id='zipcode'
|
||||
name='location.zipcode'
|
||||
className='border rounded w-full py-2 px-3 mb-2'
|
||||
placeholder='Zipcode'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mb-4 flex flex-wrap'>
|
||||
<div className='w-full sm:w-1/3 pr-2'>
|
||||
<label htmlFor='beds' className='block text-gray-700 font-bold mb-2'>
|
||||
Beds
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='beds'
|
||||
name='beds'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className='w-full sm:w-1/3 px-2'>
|
||||
<label htmlFor='baths' className='block text-gray-700 font-bold mb-2'>
|
||||
Baths
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='baths'
|
||||
name='baths'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className='w-full sm:w-1/3 pl-2'>
|
||||
<label
|
||||
htmlFor='square_feet'
|
||||
className='block text-gray-700 font-bold mb-2'
|
||||
>
|
||||
Square Feet
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='square_feet'
|
||||
name='square_feet'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-4'>
|
||||
<label className='block text-gray-700 font-bold mb-2'>Amenities</label>
|
||||
<div className='grid grid-cols-2 md:grid-cols-3 gap-2'>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_wifi'
|
||||
name='amenities'
|
||||
value='Wifi'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_wifi'>Wifi</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_kitchen'
|
||||
name='amenities'
|
||||
value='Full kitchen'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_kitchen'>Full kitchen</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_washer_dryer'
|
||||
name='amenities'
|
||||
value='Washer & Dryer'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_washer_dryer'>Washer & Dryer</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_free_parking'
|
||||
name='amenities'
|
||||
value='Free Parking'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_free_parking'>Free Parking</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_pool'
|
||||
name='amenities'
|
||||
value='Swimming Pool'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_pool'>Swimming Pool</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_hot_tub'
|
||||
name='amenities'
|
||||
value='Hot Tub'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_hot_tub'>Hot Tub</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_24_7_security'
|
||||
name='amenities'
|
||||
value='24/7 Security'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_24_7_security'>24/7 Security</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_wheelchair_accessible'
|
||||
name='amenities'
|
||||
value='Wheelchair Accessible'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_wheelchair_accessible'>
|
||||
Wheelchair Accessible
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_elevator_access'
|
||||
name='amenities'
|
||||
value='Elevator Access'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_elevator_access'>Elevator Access</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_dishwasher'
|
||||
name='amenities'
|
||||
value='Dishwasher'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_dishwasher'>Dishwasher</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_gym_fitness_center'
|
||||
name='amenities'
|
||||
value='Gym/Fitness Center'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_gym_fitness_center'>
|
||||
Gym/Fitness Center
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_air_conditioning'
|
||||
name='amenities'
|
||||
value='Air Conditioning'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_air_conditioning'>Air Conditioning</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_balcony_patio'
|
||||
name='amenities'
|
||||
value='Balcony/Patio'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_balcony_patio'>Balcony/Patio</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_smart_tv'
|
||||
name='amenities'
|
||||
value='Smart TV'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_smart_tv'>Smart TV</label>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type='checkbox'
|
||||
id='amenity_coffee_maker'
|
||||
name='amenities'
|
||||
value='Coffee Maker'
|
||||
className='mr-2'
|
||||
/>
|
||||
<label htmlFor='amenity_coffee_maker'>Coffee Maker</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-4 bg-blue-50 p-4'>
|
||||
<label className='block text-gray-700 font-bold mb-2'>
|
||||
Rates (Leave blank if not applicable)
|
||||
</label>
|
||||
<div className='flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4'>
|
||||
<div className='flex items-center'>
|
||||
<label htmlFor='weekly_rate' className='mr-2'>
|
||||
Weekly
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='weekly_rate'
|
||||
name='rates.weekly'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<label htmlFor='monthly_rate' className='mr-2'>
|
||||
Monthly
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='monthly_rate'
|
||||
name='rates.monthly'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<label htmlFor='nightly_rate' className='mr-2'>
|
||||
Nightly
|
||||
</label>
|
||||
<input
|
||||
type='number'
|
||||
id='nightly_rate'
|
||||
name='rates.nightly'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-4'>
|
||||
<label
|
||||
htmlFor='seller_name'
|
||||
className='block text-gray-700 font-bold mb-2'
|
||||
>
|
||||
Seller Name
|
||||
</label>
|
||||
<input
|
||||
type='text'
|
||||
id='seller_name'
|
||||
name='seller_info.name.'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
placeholder='Name'
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-4'>
|
||||
<label
|
||||
htmlFor='seller_email'
|
||||
className='block text-gray-700 font-bold mb-2'
|
||||
>
|
||||
Seller Email
|
||||
</label>
|
||||
<input
|
||||
type='email'
|
||||
id='seller_email'
|
||||
name='seller_info.email'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
placeholder='Email address'
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className='mb-4'>
|
||||
<label
|
||||
htmlFor='seller_phone'
|
||||
className='block text-gray-700 font-bold mb-2'
|
||||
>
|
||||
Seller Phone
|
||||
</label>
|
||||
<input
|
||||
type='tel'
|
||||
id='seller_phone'
|
||||
name='seller_info.phone'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
placeholder='Phone'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mb-4'>
|
||||
<label htmlFor='images' className='block text-gray-700 font-bold mb-2'>
|
||||
Images (Select up to 4 images)
|
||||
</label>
|
||||
<input
|
||||
type='file'
|
||||
id='images'
|
||||
name='images'
|
||||
className='border rounded w-full py-2 px-3'
|
||||
accept='image/*'
|
||||
multiple
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline'
|
||||
type='submit'
|
||||
>
|
||||
Add Property
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default PropertyAddForm;
|
||||
Reference in New Issue
Block a user