smll fixes
This commit is contained in:
ruchi
commit
dacadcdb2d
23 changed files with 711 additions and 127 deletions
|
|
@ -3,7 +3,7 @@
|
||||||
The Real Estate Website using React made by Ruchira Perrera, Sam Oyediran, Batuhan Basoglu, and Kene Ojukwu.
|
The Real Estate Website using React made by Ruchira Perrera, Sam Oyediran, Batuhan Basoglu, and Kene Ojukwu.
|
||||||
|
|
||||||
|
|
||||||
After npm start execute the command "node src/shared-components/contact-us/index.js" in order to set up the backend of the contact form.
|
After npm start execute the command "node src/shared-components/contact-us/index.js" in order to set up the backend of the contact form. (Optional)
|
||||||
|
|
||||||
# Authors
|
# Authors
|
||||||
|
|
||||||
|
|
|
||||||
12
package.json
12
package.json
|
|
@ -3,12 +3,15 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@reach/combobox": "^0.10.5",
|
||||||
|
"@react-google-maps/api": "^1.9.0",
|
||||||
"@testing-library/jest-dom": "^5.11.10",
|
"@testing-library/jest-dom": "^5.11.10",
|
||||||
"@testing-library/react": "^11.2.5",
|
"@testing-library/react": "^11.2.5",
|
||||||
"@testing-library/user-event": "^12.8.3",
|
"@testing-library/user-event": "^12.8.3",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"bootstrap": "^4.6.0",
|
"bootstrap": "^4.6.0",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
|
"date-fns": "^2.13.0",
|
||||||
"email-validator": "^2.0.4",
|
"email-validator": "^2.0.4",
|
||||||
"express": "^4.17.1",
|
"express": "^4.17.1",
|
||||||
"flag-icon-css": "^3.5.0",
|
"flag-icon-css": "^3.5.0",
|
||||||
|
|
@ -34,13 +37,10 @@
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
"react-select": "^4.3.0",
|
"react-select": "^4.3.0",
|
||||||
"spectre.css": "^0.5.9",
|
|
||||||
"web-vitals": "^1.1.1",
|
|
||||||
"@reach/combobox": "^0.10.2",
|
|
||||||
"@react-google-maps/api": "^1.9.0",
|
|
||||||
"date-fns": "^2.13.0",
|
|
||||||
"use-places-autocomplete": "^1.3.5",
|
|
||||||
"reactstrap": "^8.9.0",
|
"reactstrap": "^8.9.0",
|
||||||
|
"spectre.css": "^0.5.9",
|
||||||
|
"use-places-autocomplete": "^1.3.5",
|
||||||
|
"web-vitals": "^1.1.1",
|
||||||
"yup": "^0.32.9"
|
"yup": "^0.32.9"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,10 @@
|
||||||
"Home5": "members who want to benefit from our deals. Above are some houses which can interest you. Feel free to",
|
"Home5": "members who want to benefit from our deals. Above are some houses which can interest you. Feel free to",
|
||||||
"Home6": "click the buttons above to explore the houses you want.",
|
"Home6": "click the buttons above to explore the houses you want.",
|
||||||
"Desc": "Description",
|
"Desc": "Description",
|
||||||
"Rooms": "1 Bedroom, 2 Bathroom",
|
"Rooms": "2 Bedroom, 3 Bathroom",
|
||||||
|
"Rooms1": "1 Bedroom, 1 Bathroom",
|
||||||
|
"Rooms2": "3 Bedroom, 3 Bathroom",
|
||||||
|
"Rooms3": "3 Bedroom, 3 Bathroom",
|
||||||
"Danger1": "Message could not send.",
|
"Danger1": "Message could not send.",
|
||||||
"Danger2": "There are some errors in your contact form.",
|
"Danger2": "There are some errors in your contact form.",
|
||||||
"Success1": "The message is successfully sent.",
|
"Success1": "The message is successfully sent.",
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,10 @@
|
||||||
"Home5": "membres qui souhaitent bénéficier de nos offres. Ci-dessus, quelques maisons qui peuvent vous intéresser. N'hésitez",
|
"Home5": "membres qui souhaitent bénéficier de nos offres. Ci-dessus, quelques maisons qui peuvent vous intéresser. N'hésitez",
|
||||||
"Home6": "pas à cliquez sur les boutons ci-dessus pour explorer les maisons que vous souhaitez.",
|
"Home6": "pas à cliquez sur les boutons ci-dessus pour explorer les maisons que vous souhaitez.",
|
||||||
"Desc": "La Description",
|
"Desc": "La Description",
|
||||||
"Rooms": "1 chambre, 2 salles de bains",
|
"Rooms": "2 chambre, 3 salles de bains",
|
||||||
|
"Rooms1": "1 chambre, 1 salles de bains",
|
||||||
|
"Rooms2": "3 chambre, 3 salles de bains",
|
||||||
|
"Rooms3": "3 chambre, 3 salles de bains",
|
||||||
"Danger1": "Le message n'a pas pu être envoyé.",
|
"Danger1": "Le message n'a pas pu être envoyé.",
|
||||||
"Danger2": "Il y a des erreurs dans votre formulaire de contact.",
|
"Danger2": "Il y a des erreurs dans votre formulaire de contact.",
|
||||||
"Success1": "Le message a été envoyé avec succès.",
|
"Success1": "Le message a été envoyé avec succès.",
|
||||||
|
|
|
||||||
69
src/App.js
69
src/App.js
|
|
@ -1,82 +1,31 @@
|
||||||
import React, { useEffect } from "react";
|
import React from "react";
|
||||||
import Footer from "./shared-components/footer-component/Footer";
|
import Footer from "./shared-components/footer-component/Footer";
|
||||||
import Navbar from "./shared-components/navbar-component/Navbar";
|
import Navbar from "./shared-components/navbar-component/Navbar";
|
||||||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||||
import i18next from "i18next";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import Cookies from "js-cookie";
|
|
||||||
import HomePage from "./homePage/Homepage";
|
import HomePage from "./homePage/Homepage";
|
||||||
import ListingsPage from "./listings-page/ListingsPage";
|
import ListingsPage from "./listings-page/ListingsPage";
|
||||||
import AgentPage from "./agent-page/AgentPage";
|
import AgentPage from "./agent-page/AgentPage";
|
||||||
import ListingPage from "./listings-page/single-listing/listing-page";
|
import ListingPage1 from "./listings-page/single-listing-1/listing-page-1";
|
||||||
|
import ListingPage2 from "./listings-page/single-listing-2/listing-page-2";
|
||||||
|
import ListingPage3 from "./listings-page/single-listing-3/listing-page-3";
|
||||||
|
import ListingPage4 from "./listings-page/single-listing-4/listing-page-4";
|
||||||
import Login from "./login-page/Login";
|
import Login from "./login-page/Login";
|
||||||
import Account from "./login-page/account/Account";
|
import Account from "./login-page/account/Account";
|
||||||
import ContactUs from "./shared-components/contact-us/contact-us";
|
import ContactUs from "./shared-components/contact-us/contact-us";
|
||||||
|
|
||||||
const langauges = [
|
|
||||||
{
|
|
||||||
code: "fr",
|
|
||||||
name: "Français",
|
|
||||||
country_code: "fr",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
code: "en",
|
|
||||||
name: "English",
|
|
||||||
country_code: "gb",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const currentLanguageCode = Cookies.get("i18next") || "en";
|
|
||||||
const currentLanguage = langauges.find(
|
|
||||||
(lang) => lang.code === currentLanguageCode
|
|
||||||
);
|
|
||||||
const { t } = useTranslation();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
document.body.dir = currentLanguage.dir || "ltr";
|
|
||||||
}, [currentLanguage]);
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
{/* create the translations button */}
|
|
||||||
<div className="container">
|
|
||||||
<div className="d-flex justify-content-end">
|
|
||||||
{/* <!-- Example single danger button --> */}
|
|
||||||
<div class="btn-group">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-link dropdown-toggle"
|
|
||||||
data-toggle="dropdown"
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-expanded="false"
|
|
||||||
>
|
|
||||||
<i class="fas fa-globe"></i>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu">
|
|
||||||
{langauges.map(({ code, name, country_code }) => (
|
|
||||||
<button
|
|
||||||
class="dropdown-item"
|
|
||||||
key={code}
|
|
||||||
onClick={() => i18next.changeLanguage(code)}
|
|
||||||
disabled={code === currentLanguageCode}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`flag-icon flag-icon-${country_code} mx-2`}
|
|
||||||
></span>
|
|
||||||
{name}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Navbar></Navbar>
|
<Navbar></Navbar>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path="/" component={HomePage}></Route>
|
<Route exact path="/" component={HomePage}></Route>
|
||||||
<Route path="/listings" component={ListingsPage}></Route>
|
<Route path="/listings" component={ListingsPage}></Route>
|
||||||
<Route path="/agents" component={AgentPage}></Route>
|
<Route path="/agents" component={AgentPage}></Route>
|
||||||
<Route path="/listing-page" component={ListingPage}></Route>
|
<Route path="/listing-page-1" component={ListingPage1}></Route>
|
||||||
|
<Route path="/listing-page-2" component={ListingPage2}></Route>
|
||||||
|
<Route path="/listing-page-3" component={ListingPage3}></Route>
|
||||||
|
<Route path="/listing-page-4" component={ListingPage4}></Route>
|
||||||
<Route path="/login" component={Login}></Route>
|
<Route path="/login" component={Login}></Route>
|
||||||
<Route path="/contact-us" component={ContactUs}></Route>
|
<Route path="/contact-us" component={ContactUs}></Route>
|
||||||
<Route path="/account" component={Account}></Route>
|
<Route path="/account" component={Account}></Route>
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ class Homepage extends Component {
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
|
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>100 Charlie Rogers, Kanata, ON K2V 1A7</h3>
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
||||||
<div className="buttonka">
|
<div className="buttonka">
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
<Button href="/listing-page-3" variant="info">{t("Info")}</Button>
|
||||||
</div>
|
</div>
|
||||||
</Carousel.Caption>
|
</Carousel.Caption>
|
||||||
</Carousel.Item>
|
</Carousel.Item>
|
||||||
|
|
@ -51,9 +51,9 @@ class Homepage extends Component {
|
||||||
<img className="headerImg" src={house2} alt="Second House" />
|
<img className="headerImg" src={house2} alt="Second House" />
|
||||||
<Carousel.Caption>
|
<Carousel.Caption>
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
|
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>1490 Youville Drive, Orléans, ON K1C 2X8</h3>
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms1")}</h2>
|
||||||
<div className="buttonka">
|
<div className="buttonka">
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
<Button href="/listing-page-2" variant="info">{t("Info")}</Button>
|
||||||
</div>
|
</div>
|
||||||
</Carousel.Caption>
|
</Carousel.Caption>
|
||||||
</Carousel.Item>
|
</Carousel.Item>
|
||||||
|
|
@ -61,9 +61,9 @@ class Homepage extends Component {
|
||||||
<img className="headerImg" src={house3} alt="Third House" />
|
<img className="headerImg" src={house3} alt="Third House" />
|
||||||
<Carousel.Caption>
|
<Carousel.Caption>
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
|
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>8720 Russell Road, Navan, ON K4B 1J1</h3>
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms2")}</h2>
|
||||||
<div className="buttonka">
|
<div className="buttonka">
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
<Button href="/listing-page-1" variant="info">{t("Info")}</Button>
|
||||||
</div>
|
</div>
|
||||||
</Carousel.Caption>
|
</Carousel.Caption>
|
||||||
</Carousel.Item>
|
</Carousel.Item>
|
||||||
|
|
@ -71,9 +71,9 @@ class Homepage extends Component {
|
||||||
<img className="headerImg" src={house4} alt="Fourth House" />
|
<img className="headerImg" src={house4} alt="Fourth House" />
|
||||||
<Carousel.Caption>
|
<Carousel.Caption>
|
||||||
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
|
<h3 style={{ fontSize: "250%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>2785 8th Line Road, Metcalfe, ON K0A 2P0</h3>
|
||||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms3")}</h2>
|
||||||
<div className="buttonka">
|
<div className="buttonka">
|
||||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
<Button href="/listing-page-4" variant="info">{t("Info")}</Button>
|
||||||
</div>
|
</div>
|
||||||
</Carousel.Caption>
|
</Carousel.Caption>
|
||||||
</Carousel.Item>
|
</Carousel.Item>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 714 KiB After Width: | Height: | Size: 714 KiB |
|
|
@ -265,7 +265,8 @@ export default function ListingsPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-6 booking_button">
|
<div className="col-6 booking_button">
|
||||||
<button>Show Listing</button>
|
<button onClick={() => { window.location.href='/listing-page-'+selected.LISTING_ID
|
||||||
|
}}>Show Listing</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
.single-listing{
|
.single-listing-1{
|
||||||
padding: 7% 15%;
|
padding: 7% 15%;
|
||||||
/* background-color: darksalmon; */
|
/* background-color: darksalmon; */
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.listing-header{
|
.listing-header{
|
||||||
|
|
@ -13,32 +14,24 @@
|
||||||
/* font-style: italic; */
|
/* font-style: italic; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-icon{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.listing-carousel{
|
.listing-carousel{
|
||||||
margin: 5% 15%;
|
margin: 5% 15%;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
/* padding-right: 10; */
|
/* padding-right: 10; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-img{
|
|
||||||
/* width: 70%; */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.amentities{
|
.amentities{
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
/* padding: 5% 0; */
|
/* padding: 5% 0; */
|
||||||
margin: 3% 40%;
|
margin: 3% 40%;
|
||||||
padding: 1% 0%;
|
/* padding: 1% 0%; */
|
||||||
}
|
}
|
||||||
.amentities-text{
|
.amentities-text{
|
||||||
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amentities-icon{
|
.amentities-icon{
|
||||||
margin: 0% 5%;
|
padding: 2% 7%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-box{
|
.description-box{
|
||||||
|
|
@ -49,10 +42,6 @@
|
||||||
|
|
||||||
.description-title{
|
.description-title{
|
||||||
padding: 2% 0%;
|
padding: 2% 0%;
|
||||||
}
|
|
||||||
.listing-description{
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.booking-btn{
|
.booking-btn{
|
||||||
135
src/listings-page/single-listing-1/listing-page-1.js
Normal file
135
src/listings-page/single-listing-1/listing-page-1.js
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
import React from "react";
|
||||||
|
import "./listing-page-1.css";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
// import house images
|
||||||
|
import house_img1 from "../../images/house3.jpg";
|
||||||
|
import house_img2 from "../../images/house1-2.jpg";
|
||||||
|
import house_img3 from "../../images/house1-3.jpg";
|
||||||
|
const ListingPage1 = () => {
|
||||||
|
return (
|
||||||
|
<div className="single-listing-1">
|
||||||
|
{/* Listing header */}
|
||||||
|
<div className="row listing-header">
|
||||||
|
<div className="col-12">
|
||||||
|
<h2 className="listing-title">
|
||||||
|
<i class="fas fa-home title-icon"></i> 8720 Russell Road
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Carousel for images of the listings */}
|
||||||
|
<div className="listing-carousel">
|
||||||
|
<div
|
||||||
|
id="carouselExampleControls"
|
||||||
|
class="carousel slide"
|
||||||
|
data-ride="carousel"
|
||||||
|
>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active carousel-img">
|
||||||
|
<img
|
||||||
|
src={house_img1}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item carousel-img">
|
||||||
|
<img
|
||||||
|
src={house_img2}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<img
|
||||||
|
src={house_img3}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="carousel-control-prev"
|
||||||
|
href="#carouselExampleControls"
|
||||||
|
role="button"
|
||||||
|
data-slide="prev"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="carousel-control-next"
|
||||||
|
href="#carouselExampleControls"
|
||||||
|
role="button"
|
||||||
|
data-slide="next"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text box for listing amenities */}
|
||||||
|
<div className="amentities">
|
||||||
|
<span className="amentities-text">2</span>
|
||||||
|
<i class="fas fa-bed fa-3x amentities-icon"></i>
|
||||||
|
<span className="amentities-text">4</span>
|
||||||
|
<i class="fas fa-bath fa-3x amentities-icon"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description for the listing */}
|
||||||
|
<div className="description-box">
|
||||||
|
<h2 className="description-title">Description</h2>
|
||||||
|
<p className="listing-description">
|
||||||
|
RUN DON'T WALK to this beautiful former Jayman show home. This home
|
||||||
|
has every feature and convenience you could want in a home. When you
|
||||||
|
enter you will be greeted with a large entry way, open concept main
|
||||||
|
floor with a very spacious chef-like kitchen, the big eat in dinning
|
||||||
|
area is an entertainers dream and plenty of room in the living room as
|
||||||
|
to cozy up to the fireplace. When you head upstairs the owner 's suite
|
||||||
|
will impress with a gorgeous ensuite consisting of a large soaker tub,
|
||||||
|
oversized shower, separate vanities, in-floor heating and 2 separate
|
||||||
|
closest. You will also find a nice sized flex room, spacious laundry
|
||||||
|
room up stairs, 4 piece main bathroom and 2 more bedrooms. Then head
|
||||||
|
downstairs where you will find another bedroom, bathroom and Theatre
|
||||||
|
room with wet bar and beverage station that is perfect for any movie
|
||||||
|
lover. Must not forget that this home is air conditioned, has front
|
||||||
|
and back irrigation outside and speakers throughout the house. All of
|
||||||
|
this can be yours in the lake community of Auburn Bay close to all
|
||||||
|
amenities and year round lake access just a short distance away
|
||||||
|
</p>
|
||||||
|
<div className="booking-btn">
|
||||||
|
<Link to="/contact-us">
|
||||||
|
<button type="button" class="btn btn-lg btn-info">
|
||||||
|
Book Showing
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// sources for the images used
|
||||||
|
//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
|
||||||
|
|
||||||
|
//House description
|
||||||
|
// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
|
||||||
|
// images
|
||||||
|
// 1 ->house1.jpg
|
||||||
|
// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
|
||||||
|
// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
|
||||||
|
//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
|
||||||
|
// 1 ->house2.jpg
|
||||||
|
// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
|
||||||
|
// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
|
||||||
|
//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
|
||||||
|
// 1 ->house3.jpg
|
||||||
|
// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
|
||||||
|
// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
|
||||||
|
//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
|
||||||
|
// 1 ->house4.jpg
|
||||||
|
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
|
||||||
|
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
|
||||||
|
|
||||||
|
export default ListingPage1;
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { shallow } from "enzyme";
|
import { shallow } from "enzyme";
|
||||||
import ListingPage from "./listing-page";
|
import ListingPage1 from "./listing-page-1";
|
||||||
|
|
||||||
describe("ListingPage", () => {
|
describe("ListingPage1", () => {
|
||||||
test("matches snapshot", () => {
|
test("matches snapshot", () => {
|
||||||
const wrapper = shallow(<ListingPage />);
|
const wrapper = shallow(<ListingPage1 />);
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
51
src/listings-page/single-listing-2/listing-page-2.css
Normal file
51
src/listings-page/single-listing-2/listing-page-2.css
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
.single-listing-2{
|
||||||
|
padding: 7% 15%;
|
||||||
|
/* background-color: darksalmon; */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing-header{
|
||||||
|
border: 1px solid black;
|
||||||
|
text-align: left;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.listing-title{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
/* font-style: italic; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing-carousel{
|
||||||
|
margin: 5% 15%;
|
||||||
|
width: 70%;
|
||||||
|
/* padding-right: 10; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.amentities{
|
||||||
|
border: 1px solid black;
|
||||||
|
/* padding: 5% 0; */
|
||||||
|
margin: 3% 40%;
|
||||||
|
/* padding: 1% 0%; */
|
||||||
|
}
|
||||||
|
.amentities-text{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amentities-icon{
|
||||||
|
padding: 2% 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-box{
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 5%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-title{
|
||||||
|
padding: 2% 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.booking-btn{
|
||||||
|
padding: 2% 0%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
138
src/listings-page/single-listing-2/listing-page-2.js
Normal file
138
src/listings-page/single-listing-2/listing-page-2.js
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
import React from "react";
|
||||||
|
import "./listing-page-2.css";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
// import house images
|
||||||
|
import house_img1 from "../../images/house2.jpg";
|
||||||
|
import house_img2 from "../../images/house2-2.jpg";
|
||||||
|
import house_img3 from "../../images/house2-3.jpg";
|
||||||
|
const ListingPage2 = () => {
|
||||||
|
return (
|
||||||
|
<div className="single-listing-2">
|
||||||
|
{/* Listing header */}
|
||||||
|
<div className="row listing-header">
|
||||||
|
<div className="col-12">
|
||||||
|
<h2 className="listing-title">
|
||||||
|
<i class="fas fa-home title-icon"></i> 1490 Youville Drive
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Carousel for images of the listings */}
|
||||||
|
<div className="listing-carousel">
|
||||||
|
<div
|
||||||
|
id="carouselExampleControls"
|
||||||
|
class="carousel slide"
|
||||||
|
data-ride="carousel"
|
||||||
|
>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active carousel-img">
|
||||||
|
<img
|
||||||
|
src={house_img1}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item carousel-img">
|
||||||
|
<img
|
||||||
|
src={house_img2}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<img
|
||||||
|
src={house_img3}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="carousel-control-prev"
|
||||||
|
href="#carouselExampleControls"
|
||||||
|
role="button"
|
||||||
|
data-slide="prev"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="carousel-control-next"
|
||||||
|
href="#carouselExampleControls"
|
||||||
|
role="button"
|
||||||
|
data-slide="next"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text box for listing amenities */}
|
||||||
|
<div className="amentities">
|
||||||
|
<span className="amentities-text">1</span>
|
||||||
|
<i class="fas fa-bed fa-3x amentities-icon"></i>
|
||||||
|
<span className="amentities-text">1</span>
|
||||||
|
<i class="fas fa-bath fa-3x amentities-icon"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description for the listing */}
|
||||||
|
<div className="description-box">
|
||||||
|
<h2 className="description-title">Description</h2>
|
||||||
|
<p className="listing-description">
|
||||||
|
Nature at its Finest The Shores of Toney Bay are located at the mouth
|
||||||
|
of River Phillip where it meets the Northumberland Straight with
|
||||||
|
direct access to the incredible recreational waterways of River
|
||||||
|
Phillip and nature rich Toney Bay. This nature lovers paradise boasts
|
||||||
|
a plethora of migratory bird life and the rich fish stock of River
|
||||||
|
Philip. The warm waters of the Northumberland Straight are swimmable
|
||||||
|
from your shorefront, easy access to year-around activities and close
|
||||||
|
proximity to the quaint community of Pugwash make this an ideal spot
|
||||||
|
for a permeant residence or cottage. There are also ocean view /
|
||||||
|
deeded access lots available. Large lots with unobstructed views and
|
||||||
|
well away from highway noise. Swim in the warm waters at beautiful
|
||||||
|
Heather's Beach just 4km away, fly fishing in the spring on River
|
||||||
|
Phillip, book at tee time at Northumberland links, 16km away or enjoy
|
||||||
|
a day at the Luxury Fox Harb'r Resort and Spa less then 30 mins away,
|
||||||
|
and in winter enjoy skiing at Ski Wentworth a short 30 minutes drive.
|
||||||
|
Lots are flat, cleared and ready for your dream home. All septic and
|
||||||
|
building lot approvals are in place, good roads, and power to the lot
|
||||||
|
line are included. Please take a few minutes to watch the video of the
|
||||||
|
stunning Shores at Toney Bay
|
||||||
|
</p>
|
||||||
|
<div className="booking-btn">
|
||||||
|
<Link to="/contact-us">
|
||||||
|
<button type="button" class="btn btn-lg btn-info">
|
||||||
|
Book Showing
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// sources for the images used
|
||||||
|
//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
|
||||||
|
|
||||||
|
//House description
|
||||||
|
// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
|
||||||
|
// images
|
||||||
|
// 1 ->house1.jpg
|
||||||
|
// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
|
||||||
|
// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
|
||||||
|
//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
|
||||||
|
// 1 ->house2.jpg
|
||||||
|
// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
|
||||||
|
// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
|
||||||
|
//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
|
||||||
|
// 1 ->house3.jpg
|
||||||
|
// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
|
||||||
|
// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
|
||||||
|
//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
|
||||||
|
// 1 ->house4.jpg
|
||||||
|
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
|
||||||
|
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
|
||||||
|
|
||||||
|
export default ListingPage2;
|
||||||
10
src/listings-page/single-listing-2/listing-page-2.test.js
Normal file
10
src/listings-page/single-listing-2/listing-page-2.test.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from "react";
|
||||||
|
import { shallow } from "enzyme";
|
||||||
|
import ListingPage2 from "./listing-page-2";
|
||||||
|
|
||||||
|
describe("ListingPage2", () => {
|
||||||
|
test("matches snapshot", () => {
|
||||||
|
const wrapper = shallow(<ListingPage2 />);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
51
src/listings-page/single-listing-3/listing-page-3.css
Normal file
51
src/listings-page/single-listing-3/listing-page-3.css
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
.single-listing-3{
|
||||||
|
padding: 7% 15%;
|
||||||
|
/* background-color: darksalmon; */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing-header{
|
||||||
|
border: 1px solid black;
|
||||||
|
text-align: left;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.listing-title{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
/* font-style: italic; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing-carousel{
|
||||||
|
margin: 5% 15%;
|
||||||
|
width: 70%;
|
||||||
|
/* padding-right: 10; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.amentities{
|
||||||
|
border: 1px solid black;
|
||||||
|
/* padding: 5% 0; */
|
||||||
|
margin: 3% 40%;
|
||||||
|
/* padding: 1% 0%; */
|
||||||
|
}
|
||||||
|
.amentities-text{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amentities-icon{
|
||||||
|
padding: 2% 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-box{
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 5%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-title{
|
||||||
|
padding: 2% 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.booking-btn{
|
||||||
|
padding: 2% 0%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
133
src/listings-page/single-listing-3/listing-page-3.js
Normal file
133
src/listings-page/single-listing-3/listing-page-3.js
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
import React from "react";
|
||||||
|
import "./listing-page-3.css";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
// import house images
|
||||||
|
import house_img1 from "../../images/house1.jpg";
|
||||||
|
import house_img2 from "../../images/house3-2.jpg";
|
||||||
|
import house_img3 from "../../images/house3-3.jpg";
|
||||||
|
const ListingPage3 = () => {
|
||||||
|
return (
|
||||||
|
<div className="single-listing-3">
|
||||||
|
{/* Listing header */}
|
||||||
|
<div className="row listing-header">
|
||||||
|
<div className="col-12">
|
||||||
|
<h2 className="listing-title">
|
||||||
|
<i class="fas fa-home title-icon"></i> 100 Charlie Rogers Place
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Carousel for images of the listings */}
|
||||||
|
<div className="listing-carousel">
|
||||||
|
<div
|
||||||
|
id="carouselExampleControls"
|
||||||
|
class="carousel slide"
|
||||||
|
data-ride="carousel"
|
||||||
|
>
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<div class="carousel-item active carousel-img">
|
||||||
|
<img
|
||||||
|
src={house_img1}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item carousel-img">
|
||||||
|
<img
|
||||||
|
src={house_img2}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item">
|
||||||
|
<img
|
||||||
|
src={house_img3}
|
||||||
|
class="d-block w-100"
|
||||||
|
alt="listing-img"
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="carousel-control-prev"
|
||||||
|
href="#carouselExampleControls"
|
||||||
|
role="button"
|
||||||
|
data-slide="prev"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Previous</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="carousel-control-next"
|
||||||
|
href="#carouselExampleControls"
|
||||||
|
role="button"
|
||||||
|
data-slide="next"
|
||||||
|
>
|
||||||
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||||
|
<span class="sr-only">Next</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Text box for listing amenities */}
|
||||||
|
<div className="amentities">
|
||||||
|
<span className="amentities-text">2</span>
|
||||||
|
<i class="fas fa-bed fa-3x amentities-icon"></i>
|
||||||
|
<span className="amentities-text">3</span>
|
||||||
|
<i class="fas fa-bath fa-3x amentities-icon"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description for the listing */}
|
||||||
|
<div className="description-box">
|
||||||
|
<h2 className="description-title">Description</h2>
|
||||||
|
<p className="listing-description">
|
||||||
|
Custom, Hi-Ranch home located in sought after neighborhood in the
|
||||||
|
Heart of Petawawa. This home features 2+1 bedrooms and 4 bathrooms.
|
||||||
|
Main level features spacious foyer, hardwood staircase, gleaming
|
||||||
|
hardwood floors and open concept living. Large windows provide lots of
|
||||||
|
natural light, vaulted ceilings in living room, a spectacular spacious
|
||||||
|
kitchen with stainless steel appliances and large island. Master
|
||||||
|
bedroom with walk through closet and 3 piece en-suite with custom tile
|
||||||
|
shower and heated tile floor. Lower level features a finished rec room
|
||||||
|
with cozy gas fireplace, bedroom and 3 piece bathroom. Patio door in
|
||||||
|
foyer leads to large private backyard with no rear neighbours,
|
||||||
|
spacious wood deck and hot tub. Double attached garage completes the
|
||||||
|
package. Pack your backs and move right in! No Conveyances of offers
|
||||||
|
until Friday April 9th at 3PM however the seller has the right to view
|
||||||
|
and may accept pre-emptive offers
|
||||||
|
</p>
|
||||||
|
<div className="booking-btn">
|
||||||
|
<Link to="/contact-us">
|
||||||
|
<button type="button" class="btn btn-lg btn-info">
|
||||||
|
Book Showing
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// sources for the images used
|
||||||
|
//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
|
||||||
|
|
||||||
|
//House description
|
||||||
|
// ->Link 1 -https://www.realtor.ca/real-estate/23018057/9811-elbow-drive-calgary-haysboro
|
||||||
|
// images
|
||||||
|
// 1 ->house1.jpg
|
||||||
|
// 2 ->//images.adsttc.com/media/images/524c/2511/e8e4/4e67/bf00/03c3/large_jpg/Tetris_House_03.jpg?1380721927
|
||||||
|
// 3 ->https://s3.amazonaws.com/on1-wp/wp-content/uploads/2018/08/3191-NW-Jenna-22-of-49v2-1024x683.jpg
|
||||||
|
//-> Link2 -> https://www.realtor.ca/real-estate/23020015/lot-14-67-seastone-drive-port-howe-port-howe
|
||||||
|
// 1 ->house2.jpg
|
||||||
|
// 2 ->https://static.photocdn.pt/images/articles/2019/12/24/How_to_Take_Gorgeous_Interior_Real_Estate_Photos.jpg
|
||||||
|
// 3 ->https://i.pinimg.com/originals/f3/72/87/f372870f4f99d3278193a3970aa394ce.jpg
|
||||||
|
//->Link3 -> https://www.realtor.ca/real-estate/23020040/1035-butler-boulevard-petawawa-laurentian-highlands
|
||||||
|
// 1 ->house3.jpg
|
||||||
|
// 2 ->https://miro.medium.com/max/1200/1*EyGqOwy0wQwKHUgi3xpQZA.png
|
||||||
|
// 3 ->https://i.pinimg.com/originals/9b/fe/76/9bfe76b23f7ed9dcb35f7553b8255f48.jpg
|
||||||
|
//->Link4 -> https://www.realtor.ca/real-estate/23020103/62-riddle-court-north-bay
|
||||||
|
// 1 ->house4.jpg
|
||||||
|
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
|
||||||
|
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
|
||||||
|
|
||||||
|
export default ListingPage3;
|
||||||
10
src/listings-page/single-listing-3/listing-page-3.test.js
Normal file
10
src/listings-page/single-listing-3/listing-page-3.test.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from "react";
|
||||||
|
import { shallow } from "enzyme";
|
||||||
|
import ListingPage3 from "./listing-page-3";
|
||||||
|
|
||||||
|
describe("ListingPage3", () => {
|
||||||
|
test("matches snapshot", () => {
|
||||||
|
const wrapper = shallow(<ListingPage3 />);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
51
src/listings-page/single-listing-4/listing-page-4.css
Normal file
51
src/listings-page/single-listing-4/listing-page-4.css
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
.single-listing-4{
|
||||||
|
padding: 7% 15%;
|
||||||
|
/* background-color: darksalmon; */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing-header{
|
||||||
|
border: 1px solid black;
|
||||||
|
text-align: left;
|
||||||
|
padding: 1%;
|
||||||
|
}
|
||||||
|
.listing-title{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
/* font-style: italic; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.listing-carousel{
|
||||||
|
margin: 5% 15%;
|
||||||
|
width: 70%;
|
||||||
|
/* padding-right: 10; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.amentities{
|
||||||
|
border: 1px solid black;
|
||||||
|
/* padding: 5% 0; */
|
||||||
|
margin: 3% 40%;
|
||||||
|
/* padding: 1% 0%; */
|
||||||
|
}
|
||||||
|
.amentities-text{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amentities-icon{
|
||||||
|
padding: 2% 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-box{
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 5%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-title{
|
||||||
|
padding: 2% 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.booking-btn{
|
||||||
|
padding: 2% 0%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -1,17 +1,19 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import "./listing-page.css";
|
import "./listing-page-4.css";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
// import house images
|
// import house images
|
||||||
import house_img1 from "../../images/house1-2.jpg";
|
import house_img1 from "../../images/house4.jpg";
|
||||||
const ListingPage = () => {
|
import house_img2 from "../../images/house4-2.jpg";
|
||||||
|
import house_img3 from "../../images/house4-3.jpg";
|
||||||
|
const ListingPage4 = () => {
|
||||||
return (
|
return (
|
||||||
<div className="single-listing">
|
<div className="single-listing-4">
|
||||||
{/* Listing header */}
|
{/* Listing header */}
|
||||||
<div className="row listing-header">
|
<div className="row listing-header">
|
||||||
<div className="col-12">
|
<div className="col-12">
|
||||||
<h2 className="listing-title">
|
<h2 className="listing-title">
|
||||||
<i class="fas fa-home title-icon"></i> My title
|
<i class="fas fa-home title-icon"></i> 2785 8th Line Road
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -33,14 +35,14 @@ const ListingPage = () => {
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item carousel-img">
|
<div class="carousel-item carousel-img">
|
||||||
<img
|
<img
|
||||||
src={house_img1}
|
src={house_img2}
|
||||||
class="d-block w-100"
|
class="d-block w-100"
|
||||||
alt="listing-img"
|
alt="listing-img"
|
||||||
></img>
|
></img>
|
||||||
</div>
|
</div>
|
||||||
<div class="carousel-item">
|
<div class="carousel-item">
|
||||||
<img
|
<img
|
||||||
src={house_img1}
|
src={house_img3}
|
||||||
class="d-block w-100"
|
class="d-block w-100"
|
||||||
alt="listing-img"
|
alt="listing-img"
|
||||||
></img>
|
></img>
|
||||||
|
|
@ -69,12 +71,10 @@ const ListingPage = () => {
|
||||||
|
|
||||||
{/* Text box for listing amenities */}
|
{/* Text box for listing amenities */}
|
||||||
<div className="amentities">
|
<div className="amentities">
|
||||||
<span className="amentities-text">1</span>
|
|
||||||
<i class="fas fa-bed fa-2x amentities-icon"></i>
|
|
||||||
<span className="amentities-text">2</span>
|
|
||||||
<i class="fas fa-bath fa-2x amentities-icon"></i>
|
|
||||||
<span className="amentities-text">3</span>
|
<span className="amentities-text">3</span>
|
||||||
<i class="fas fa-wifi fa-2x amentities-icon"></i>
|
<i class="fas fa-bed fa-3x amentities-icon"></i>
|
||||||
|
<span className="amentities-text">3</span>
|
||||||
|
<i class="fas fa-bath fa-3x amentities-icon"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Description for the listing */}
|
{/* Description for the listing */}
|
||||||
|
|
@ -136,4 +136,4 @@ const ListingPage = () => {
|
||||||
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
|
// 2 ->https://pictureitsoldfl.com/wp-content/uploads/2016/07/305-Rudder-Cay-Way-Jupiter-FL-print-014-28-Family-Room-4200x2800-300dpi-1170x780.jpg
|
||||||
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
|
// 3 ->https://www.tlcinteriors.com.au/wp-content/uploads/2018/06/hamptons-style-kitchen-from-metricon-bayville-display-home.jpg
|
||||||
|
|
||||||
export default ListingPage;
|
export default ListingPage4;
|
||||||
10
src/listings-page/single-listing-4/listing-page-4.test.js
Normal file
10
src/listings-page/single-listing-4/listing-page-4.test.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from "react";
|
||||||
|
import { shallow } from "enzyme";
|
||||||
|
import ListingPage4 from "./listing-page-4";
|
||||||
|
|
||||||
|
describe("ListingPage4", () => {
|
||||||
|
test("matches snapshot", () => {
|
||||||
|
const wrapper = shallow(<ListingPage4 />);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -14,14 +14,20 @@ class Login extends Component {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
handleLogin = (e) => {
|
handleLogin() {
|
||||||
console.log(e);
|
// if ( !== this.state.Account.email) {
|
||||||
};
|
// alert("invalid");
|
||||||
|
// }
|
||||||
|
// if (password !== this.state.Account.password) {
|
||||||
|
// alert("invalid");
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { t } = this.props;
|
const { t } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className="login-page">
|
<div className="login-page">
|
||||||
<form action="" className="signin-Form" onClick={this.handleLogin}>
|
<form action="" className="signin-Form" onSubmit={this.handleLogin}>
|
||||||
<img className="app-logo" src={Logo} alt="app-logo" />
|
<img className="app-logo" src={Logo} alt="app-logo" />
|
||||||
<h1 className="form-title">{t("Login_header")} </h1>
|
<h1 className="form-title">{t("Login_header")} </h1>
|
||||||
<p>{t("Login_message")}</p>
|
<p>{t("Login_message")}</p>
|
||||||
|
|
@ -61,11 +67,10 @@ class Login extends Component {
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="login-btn">
|
<div className="login-btn">
|
||||||
<Link to="/account">
|
<Link to="/account"></Link>
|
||||||
<button type="submit" class="btn btn-lg btn-primary">
|
<button type="submit" class="btn btn-lg btn-primary">
|
||||||
{t("Login_submit_button")}
|
{t("Login_submit_button")}
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@ class Account extends Component {
|
||||||
lastName: "Green",
|
lastName: "Green",
|
||||||
email: "kevon.green@kcribs.com",
|
email: "kevon.green@kcribs.com",
|
||||||
password: "Kcribs123",
|
password: "Kcribs123",
|
||||||
|
phoneNumber: "613-234-8796",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -93,7 +94,7 @@ class Account extends Component {
|
||||||
type="text"
|
type="text"
|
||||||
class="form-control"
|
class="form-control"
|
||||||
id="account-phoneNumber"
|
id="account-phoneNumber"
|
||||||
placeholder={this.state.Account.email}
|
placeholder={this.state.Account.phoneNumber}
|
||||||
required
|
required
|
||||||
disabled={true}
|
disabled={true}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,33 @@
|
||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import { Link, withRouter } from "react-router-dom";
|
import { Link, withRouter } from "react-router-dom";
|
||||||
import "./Navbar.css";
|
import "./Navbar.css";
|
||||||
import logo from "./logo2.png";
|
import logo from "./logo2.png";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import i18next from "i18next";
|
||||||
|
const langauges = [
|
||||||
|
{
|
||||||
|
code: "fr",
|
||||||
|
name: "Français",
|
||||||
|
country_code: "fr",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "en",
|
||||||
|
name: "English",
|
||||||
|
country_code: "gb",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
|
const currentLanguageCode = Cookies.get("i18next") || "en";
|
||||||
|
const currentLanguage = langauges.find(
|
||||||
|
(lang) => lang.code === currentLanguageCode
|
||||||
|
);
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
useEffect(() => {
|
||||||
|
document.body.dir = currentLanguage.dir || "ltr";
|
||||||
|
}, [currentLanguage]);
|
||||||
return (
|
return (
|
||||||
/* Nav Bar */
|
/* Nav Bar */
|
||||||
<div className="Navbar">
|
<div className="Navbar">
|
||||||
|
|
@ -27,6 +49,34 @@ const Navbar = () => {
|
||||||
</button>
|
</button>
|
||||||
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
|
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||||
<ul className="navbar-nav ml-auto">
|
<ul className="navbar-nav ml-auto">
|
||||||
|
<li className="nav-item">
|
||||||
|
<div class="btn-group">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-link dropdown-toggle"
|
||||||
|
data-toggle="dropdown"
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i class="fas fa-globe"></i>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
{langauges.map(({ code, name, country_code }) => (
|
||||||
|
<button
|
||||||
|
class="dropdown-item"
|
||||||
|
key={code}
|
||||||
|
onClick={() => i18next.changeLanguage(code)}
|
||||||
|
disabled={code === currentLanguageCode}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`flag-icon flag-icon-${country_code} mx-2`}
|
||||||
|
></span>
|
||||||
|
{name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" exact to="/">
|
<Link className="nav-link" exact to="/">
|
||||||
{t("Nav_Home")}
|
{t("Nav_Home")}
|
||||||
|
|
@ -50,12 +100,6 @@ const Navbar = () => {
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li className="nav-item">
|
|
||||||
<Link className="nav-link" to="/listing-page">
|
|
||||||
{t("Nav_listing_page")}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li className="nav-item">
|
<li className="nav-item">
|
||||||
<Link className="nav-link" to="/login">
|
<Link className="nav-link" to="/login">
|
||||||
{t("Nav_Login")}
|
{t("Nav_Login")}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue