Fixed Translation
This commit is contained in:
kene17
commit
8aec99ee0e
23 changed files with 766 additions and 128 deletions
|
|
@ -3,7 +3,7 @@
|
|||
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
|
||||
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -3,12 +3,15 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@reach/combobox": "^0.10.5",
|
||||
"@react-google-maps/api": "^1.9.0",
|
||||
"@testing-library/jest-dom": "^5.11.10",
|
||||
"@testing-library/react": "^11.2.5",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"axios": "^0.21.1",
|
||||
"bootstrap": "^4.6.0",
|
||||
"cors": "^2.8.5",
|
||||
"date-fns": "^2.13.0",
|
||||
"email-validator": "^2.0.4",
|
||||
"express": "^4.17.1",
|
||||
"flag-icon-css": "^3.5.0",
|
||||
|
|
@ -34,13 +37,10 @@
|
|||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"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",
|
||||
"spectre.css": "^0.5.9",
|
||||
"use-places-autocomplete": "^1.3.5",
|
||||
"web-vitals": "^1.1.1",
|
||||
"yup": "^0.32.9"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,36 @@
|
|||
"Sales_Ass":"sales assistant",
|
||||
"Mike.Title":"Head Sales Assistant",
|
||||
"Mike.Word": "Michael has a genuine passion for helping others and for giving back to the community.",
|
||||
|
||||
"Slogan_1": "YOU ARE NOT BUYING A HOUSE, ",
|
||||
"Slogan_2": "YOU ARE BUYING A LIFESTYLE. ",
|
||||
"Info": "Click for Details",
|
||||
"Home1": "Welcome to Kene's Cribs. Kene's Cribs is a real estator company which provides the clients with the houses.",
|
||||
"Home2": "The houses limited to the clients are only limited to the clients' dreams. In order to further navigate the",
|
||||
"Home3": "website, use the navigation bar to switch between pages. Listings page is for browsing houses, Agents page",
|
||||
"Home4": "is for browsing the estators, the Contact Us page is for the contacting us and the login page is for our",
|
||||
"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.",
|
||||
"Desc": "Description",
|
||||
"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.",
|
||||
"Danger2": "There are some errors in your contact form.",
|
||||
"Success1": "The message is successfully sent.",
|
||||
"Success2": "You contact form will be delivered to our support team.",
|
||||
"Contact-Title": "Contact to Us",
|
||||
"Contact-House": "Select an Agent",
|
||||
"Contact-Agent": "Select a House",
|
||||
"No-Pref": "No preference",
|
||||
"Contact-First": "First Name",
|
||||
"Contact-Last": "Last Name",
|
||||
"Contact-Mail": "Email Address",
|
||||
"Contact-Message": "Message",
|
||||
"Contact-Submit": "Submit",
|
||||
"Contact-Error1": "Please select an item in the list.",
|
||||
"Contact-Error2": "Please fill out this field.",
|
||||
"Contact-Error3": "Invalid email address.",
|
||||
"Regular":"Sales Assistant",
|
||||
"Agent2.W":"I have a passion for assisting clients with various real estate needs.",
|
||||
"Agent3.W":"Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.",
|
||||
|
|
|
|||
|
|
@ -33,6 +33,35 @@
|
|||
"Agent3.W":"Anita a hâte de vous servir à son plein potentiel, de bâtir des relations durables et de faire de votre expérience immobilière une expérience agréable et mémorable.",
|
||||
"Agent4.W":"Depuis l'obtention de sa licence en 2010, Alex a toujours été l'un des meilleurs agents de production dans la région du Grand Toronto.",
|
||||
"Agent5.W":"Xuan a grandi dans la région du Grand Toronto et a exploré de nombreux quartiers différents de Toronto et des environs.",
|
||||
"Agent6.W":"Walter Henry a toujours été du genre à suivre sa passion. À 13 ans, il a commencé sa carrière en tant que gymnaste de compétition."
|
||||
|
||||
"Agent6.W":"Walter Henry a toujours été du genre à suivre sa passion. À 13 ans, il a commencé sa carrière en tant que gymnaste de compétition.",
|
||||
"Slogan_1": "VOUS N'ACHETEZ PAS UNE MAISON, ",
|
||||
"Slogan_2": "VOUS ACHETEZ UN STYLE DE VIE. ",
|
||||
"Info": "Cliquer pour les détails",
|
||||
"Home1": "Bienvenue chez Kene's Cribs. Kene's Cribs est une véritable société d'estateur qui fournit les maisons aux clients.",
|
||||
"Home2": "Les maisons limitées aux clients ne se limitent qu'aux rêves des clients. Afin de mieux naviguer dans site Web, utilisez",
|
||||
"Home3": "la barre de navigation pour basculer entre les pages. La page des listes sert à parcourir les maisons, la page Agents",
|
||||
"Home4": "est pour parcourir les estators, la page Contactez-nous est pour nous contacter et la page de connexion est pour notre",
|
||||
"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.",
|
||||
"Desc": "La Description",
|
||||
"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é.",
|
||||
"Danger2": "Il y a des erreurs dans votre formulaire de contact.",
|
||||
"Success1": "Le message a été envoyé avec succès.",
|
||||
"Success2": "Votre formulaire de contact sera envoyé à notre équipe d'assistance.",
|
||||
"Contact-Title": "Contactez-Nous",
|
||||
"Contact-House": "Sélectionnez un Agent",
|
||||
"Contact-Agent": "Sélectionnez une Maison",
|
||||
"No-Pref": "Aucune préférence",
|
||||
"Contact-First": "Prénom",
|
||||
"Contact-Last": "Nom de Famille",
|
||||
"Contact-Mail": "Adresse E-mail",
|
||||
"Contact-Message": "Le Message",
|
||||
"Contact-Submit": "Soumettre",
|
||||
"Contact-Error1": "Veuillez sélectionner un élément dans la liste.",
|
||||
"Contact-Error2": "Veuillez remplir ce champ.",
|
||||
"Contact-Error3": "Adresse e-mail invalide."
|
||||
}
|
||||
|
|
|
|||
67
src/App.js
67
src/App.js
|
|
@ -1,80 +1,31 @@
|
|||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
import Footer from "./shared-components/footer-component/Footer";
|
||||
import Navbar from "./shared-components/navbar-component/Navbar";
|
||||
import { BrowserRouter, Route, Switch } from "react-router-dom";
|
||||
import i18next from "i18next";
|
||||
import Cookies from "js-cookie";
|
||||
import HomePage from "./homePage/Homepage";
|
||||
import ListingsPage from "./listings-page/ListingsPage";
|
||||
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 Account from "./login-page/account/Account";
|
||||
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() {
|
||||
const currentLanguageCode = Cookies.get("i18next") || "en";
|
||||
const currentLanguage = langauges.find(
|
||||
(lang) => lang.code === currentLanguageCode
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.dir = currentLanguage.dir || "ltr";
|
||||
}, [currentLanguage]);
|
||||
return (
|
||||
<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>
|
||||
<Navbar></Navbar>
|
||||
<Switch>
|
||||
<Route exact path="/" component={HomePage}></Route>
|
||||
<Route path="/listings" component={ListingsPage}></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="/contact-us" component={ContactUs}></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>
|
||||
<h2 style={{ fontSize: "150%", textShadow: "-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black" }}>{t("Rooms")}</h2>
|
||||
<div className="buttonka">
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
<Button href="/listing-page-3" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -51,9 +51,9 @@ class Homepage extends Component {
|
|||
<img className="headerImg" src={house2} alt="Second House" />
|
||||
<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>
|
||||
<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">
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
<Button href="/listing-page-2" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -61,9 +61,9 @@ class Homepage extends Component {
|
|||
<img className="headerImg" src={house3} alt="Third House" />
|
||||
<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>
|
||||
<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">
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
<Button href="/listing-page-1" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
@ -71,9 +71,9 @@ class Homepage extends Component {
|
|||
<img className="headerImg" src={house4} alt="Fourth House" />
|
||||
<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>
|
||||
<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">
|
||||
<Button href="/listings" variant="info">{t("Info")}</Button>
|
||||
<Button href="/listing-page-4" variant="info">{t("Info")}</Button>
|
||||
</div>
|
||||
</Carousel.Caption>
|
||||
</Carousel.Item>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 714 KiB After Width: | Height: | Size: 714 KiB |
|
|
@ -262,7 +262,8 @@ export default function ListingsPage() {
|
|||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.single-listing{
|
||||
.single-listing-1{
|
||||
padding: 7% 15%;
|
||||
/* background-color: darksalmon; */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.listing-header{
|
||||
|
|
@ -13,32 +14,24 @@
|
|||
/* font-style: italic; */
|
||||
}
|
||||
|
||||
.title-icon{
|
||||
|
||||
}
|
||||
|
||||
.listing-carousel{
|
||||
margin: 5% 15%;
|
||||
width: 70%;
|
||||
/* padding-right: 10; */
|
||||
}
|
||||
|
||||
.carousel-img{
|
||||
/* width: 70%; */
|
||||
}
|
||||
|
||||
|
||||
.amentities{
|
||||
border: 1px solid black;
|
||||
/* padding: 5% 0; */
|
||||
margin: 3% 40%;
|
||||
padding: 1% 0%;
|
||||
/* padding: 1% 0%; */
|
||||
}
|
||||
.amentities-text{
|
||||
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.amentities-icon{
|
||||
margin: 0% 5%;
|
||||
padding: 2% 7%;
|
||||
}
|
||||
|
||||
.description-box{
|
||||
|
|
@ -49,10 +42,6 @@
|
|||
|
||||
.description-title{
|
||||
padding: 2% 0%;
|
||||
}
|
||||
.listing-description{
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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 { shallow } from "enzyme";
|
||||
import ListingPage from "./listing-page";
|
||||
import ListingPage1 from "./listing-page-1";
|
||||
|
||||
describe("ListingPage", () => {
|
||||
describe("ListingPage1", () => {
|
||||
test("matches snapshot", () => {
|
||||
const wrapper = shallow(<ListingPage />);
|
||||
const wrapper = shallow(<ListingPage1 />);
|
||||
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 "./listing-page.css";
|
||||
import "./listing-page-4.css";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// import house images
|
||||
import house_img1 from "../../images/house1-2.jpg";
|
||||
const ListingPage = () => {
|
||||
import house_img1 from "../../images/house4.jpg";
|
||||
import house_img2 from "../../images/house4-2.jpg";
|
||||
import house_img3 from "../../images/house4-3.jpg";
|
||||
const ListingPage4 = () => {
|
||||
return (
|
||||
<div className="single-listing">
|
||||
<div className="single-listing-4">
|
||||
{/* Listing header */}
|
||||
<div className="row listing-header">
|
||||
<div className="col-12">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,14 +35,14 @@ const ListingPage = () => {
|
|||
</div>
|
||||
<div class="carousel-item carousel-img">
|
||||
<img
|
||||
src={house_img1}
|
||||
src={house_img2}
|
||||
class="d-block w-100"
|
||||
alt="listing-img"
|
||||
></img>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img
|
||||
src={house_img1}
|
||||
src={house_img3}
|
||||
class="d-block w-100"
|
||||
alt="listing-img"
|
||||
></img>
|
||||
|
|
@ -69,12 +71,10 @@ const ListingPage = () => {
|
|||
|
||||
{/* Text box for listing amenities */}
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* 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
|
||||
// 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) => {
|
||||
console.log(e);
|
||||
};
|
||||
handleLogin() {
|
||||
// if ( !== this.state.Account.email) {
|
||||
// alert("invalid");
|
||||
// }
|
||||
// if (password !== this.state.Account.password) {
|
||||
// alert("invalid");
|
||||
// }
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
return (
|
||||
<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" />
|
||||
<h1 className="form-title">{t("Login_header")} </h1>
|
||||
<p>{t("Login_message")}</p>
|
||||
|
|
@ -61,11 +67,10 @@ class Login extends Component {
|
|||
</label>
|
||||
</div>
|
||||
<div className="login-btn">
|
||||
<Link to="/account">
|
||||
<Link to="/account"></Link>
|
||||
<button type="submit" class="btn btn-lg btn-primary">
|
||||
{t("Login_submit_button")}
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ class Account extends Component {
|
|||
lastName: "Green",
|
||||
email: "kevon.green@kcribs.com",
|
||||
password: "Kcribs123",
|
||||
phoneNumber: "613-234-8796",
|
||||
},
|
||||
};
|
||||
render() {
|
||||
|
|
@ -93,7 +94,7 @@ class Account extends Component {
|
|||
type="text"
|
||||
class="form-control"
|
||||
id="account-phoneNumber"
|
||||
placeholder={this.state.Account.email}
|
||||
placeholder={this.state.Account.phoneNumber}
|
||||
required
|
||||
disabled={true}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,33 @@
|
|||
import React from "react";
|
||||
import React, { useEffect } from "react";
|
||||
import { Link, withRouter } from "react-router-dom";
|
||||
import "./Navbar.css";
|
||||
import logo from "./logo2.png";
|
||||
import Cookies from "js-cookie";
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
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 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 (
|
||||
/* Nav Bar */
|
||||
<div className="Navbar">
|
||||
|
|
@ -27,6 +49,34 @@ const Navbar = () => {
|
|||
</button>
|
||||
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||
<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">
|
||||
<Link className="nav-link" exact to="/">
|
||||
{t("Nav_Home")}
|
||||
|
|
@ -50,12 +100,6 @@ const Navbar = () => {
|
|||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/listing-page">
|
||||
{t("Nav_listing_page")}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/login">
|
||||
{t("Nav_Login")}
|
||||
|
|
|
|||
Loading…
Reference in a new issue