muayjtp/web_react
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

created listing page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-03-12 00:38:04 -05:00
parent de4bfefb41
commit 32aa6a7855
3 changed files with 74 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
real_estate/client/src/App.jsx
View file

@ -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/>}/>

70
real_estate/client/src/pages/CreatListing.jsx Normal file
View file

@ -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

2
real_estate/client/src/pages/Profile.jsx
View file

@ -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>