From 32aa6a78556667799105ff542a7288a146ae16b3 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Tue, 12 Mar 2024 00:38:04 -0500
Subject: [PATCH] created listing page

---
 real_estate/client/src/App.jsx                |  2 +
 real_estate/client/src/pages/CreatListing.jsx | 70 +++++++++++++++++++
 real_estate/client/src/pages/Profile.jsx      |  2 +
 3 files changed, 74 insertions(+)
 create mode 100644 real_estate/client/src/pages/CreatListing.jsx

diff --git a/real_estate/client/src/App.jsx b/real_estate/client/src/App.jsx
index 69eaed7..5bc02a6 100644
--- a/real_estate/client/src/App.jsx
+++ b/real_estate/client/src/App.jsx
@@ -6,6 +6,7 @@ import Contact from './pages/Contact'
 import {Profile} from './pages/Profile'
 import Navbar from './components/Navbar'
 import PrivateRoute from './components/PrivateRoute'
+import CreatListing from './pages/CreatListing'
 
 
 const App = () => {
@@ -16,6 +17,7 @@ const App = () => {
         <Route path='/' element={<Home/>}/>
         <Route element={<PrivateRoute/>}>
           <Route path='/profile' element={<Profile/>}/>
+          <Route path='/createListing' element={<CreatListing/>}/>
         </Route>
         <Route path='/login' element={<Login/>}/>
         <Route path='/signup' element={<SignUp/>}/>
diff --git a/real_estate/client/src/pages/CreatListing.jsx b/real_estate/client/src/pages/CreatListing.jsx
new file mode 100644
index 0000000..0216b23
--- /dev/null
+++ b/real_estate/client/src/pages/CreatListing.jsx
@@ -0,0 +1,70 @@
+const CreatListing = () => {
+  return (
+    <div className="p-3 max-w-4xl mx-auto">
+        <h1 className="text-2xl uppercase text-center text-blue-900 font-serif my-10 tracking-wide">Create a listing</h1>
+        <form className="flex flex-col sm:flex-row gap-4">
+            <div className="flex flex-col flex-1 gap-4">
+                <input type="text" placeholder="Name" id="name" className='border p-2 rounded-md text-sm ' maxLength='62' minLength='10' required/>
+                <textarea type="text" placeholder="Description" id="description" className='border p-2 rounded-md text-sm resize-none' required/>
+                <input type="text" placeholder="Address" id="address" className='border p-2 rounded-md text-sm ' required/>
+                <div className="flex gap-4 flex-wrap text-sm">
+                    <div className="flex gap-2">
+                        <input type="checkbox" id="sale" className="w-4"/>
+                        <span>Sell</span>
+                    </div>
+                    <div className="flex gap-2">
+                        <input type="checkbox" id="rent" className="w-4"/>
+                        <span>Rent</span>
+                    </div>
+                    <div className="flex gap-2">
+                        <input type="checkbox" id="garage" className="w-4"/>
+                        <span>Garage</span>
+                    </div>
+                    <div className="flex gap-2">
+                        <input type="checkbox" id="furnished" className="w-4"/>
+                        <span>Furnished</span>
+                    </div>
+                    <div className="flex gap-2">
+                        <input type="checkbox" id="offer" className="w-4"/>
+                        <span>Offer</span>
+                    </div>
+                </div>
+                <div className=" flex flex-wrap gap-6 text-sm">
+                    <div className="flex gap-2 items-center">
+                        <input type='number' id="bed" min='1' required className="p-2 border border-gray-500 rounded-lg w-20"/>
+                        <p>Beds</p>
+                    </div>
+                    <div className="flex gap-2 items-center">
+                        <input type='number' id="bath" min='1' required className="p-2 border border-gray-500 rounded-lg w-20"/>
+                        <p>Baths</p>
+                    </div>
+                    <div className="flex gap-2 items-center">
+                        <input type='number' id="regularPrice" min='1' required className="p-2 border border-gray-500 rounded-lg"/>
+                        <div className="flex flex-col items-center">
+                           <p>Regular price</p>
+                           <span className="text-xs">($ per mounth)</span> 
+                        </div>
+                    </div>
+                    <div className="flex gap-2 items-center">
+                        <input type='number' id="discountPrice" min='1' required className="p-2 border border-gray-500 rounded-lg"/>
+                        <div className="flex flex-col items-center">
+                           <p>Discounted price</p> 
+                           <span className="text-xs">($ per mounth)</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col flex-1 gap-4">
+                <p className="font-semibold">Images: <span className="font-normal text-gray-500 ml-2">You can upload maximum 6 images</span></p>
+                <div className="flex gap-4">
+                    <input type="file" id="images" multiple accept="image/*"  className="p-2 border border-gray-300 rounded w-full"/>
+                    <button className="p-2 text-grenn-900 text-xs tracking-wider border border-green-900 rounded uppercase hover:bg-green-100 hover:border-green-300 disabled:opacity-80">Upload</button>
+                </div>
+                <button className="p-2 bg-blue-950 text-white text-sm font-semibold rounded-md uppercase hover:opacity-95 disabled:bg-opacity-80">Create Listing</button>
+            </div>  
+        </form>
+    </div>
+  )
+}
+
+export default CreatListing
\ No newline at end of file
diff --git a/real_estate/client/src/pages/Profile.jsx b/real_estate/client/src/pages/Profile.jsx
index 7615c41..f3ac7f4 100644
--- a/real_estate/client/src/pages/Profile.jsx
+++ b/real_estate/client/src/pages/Profile.jsx
@@ -4,6 +4,7 @@ import {getDownloadURL, getStorage, ref, uploadBytesResumable} from 'firebase/st
 import { app } from '../firebase';
 import {updateUserStart, updateUserSuccess, updateUserFailure, deleteUserFailure, deleteUserStart, deleteUserSuccess, logoutUserStart} from '../redux/user/userSlice.js'
 import { useDispatch } from 'react-redux';
+import {Link} from 'react-router-dom'
 
 export const Profile = () => {
   const fileRef = useRef(null);
@@ -120,6 +121,7 @@ export const Profile = () => {
         <input type="email" placeholder='Email' id='email' defaultValue={currentUser.email} onChange={handleChange} className='border p-2 rounded-md text-sm'/>
         <input type="password" placeholder='Password' id='password' onChange={handleChange} className='border p-2 rounded-md text-sm'/>
         <button disabled={loading} className='bg-blue-950 text-white text-sm p-2 rounded-md uppercase hover:opacity-90 disabled:opacity-80'>{loading ? 'Loading...' : 'Update'}</button>
+        <Link to='/createListing' className='bg-green-800 text-white text-sm p-2 text-center rounded-md uppercase hover:opacity-90'>Create Listing</Link>
       </form>
       <div className='flex justify-between mt-4'>
         <span onClick={handleDeleteUser} className='text-red-700 cursor-pointer'>Delete Account</span>