Merge branch 'master' into listings
This commit is contained in:
ruchi
commit
611fa53ac9
36 changed files with 20917 additions and 87 deletions
20474
package-lock.json
generated
20474
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,6 +13,7 @@
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-google-maps": "^9.4.5",
|
"react-google-maps": "^9.4.5",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
|
"spectre.css": "^0.5.9",
|
||||||
"web-vitals": "^1.1.1"
|
"web-vitals": "^1.1.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,38 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- fontawesome -->
|
<!-- fontawesome -->
|
||||||
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
|
<link
|
||||||
<title>React App</title>
|
rel="stylesheet"
|
||||||
|
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
|
||||||
|
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="/resources/demos/style.css" />
|
||||||
|
|
||||||
|
<!-- Bootstrap Scripts -->
|
||||||
|
<script
|
||||||
|
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||||||
|
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
||||||
|
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<title>Kene's Cribs</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|
|
||||||
38
src/App.css
38
src/App.css
|
|
@ -1,38 +1,10 @@
|
||||||
.App {
|
body{
|
||||||
|
margin: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-logo {
|
/* .App {
|
||||||
height: 40vmin;
|
text-align: center;
|
||||||
pointer-events: none;
|
} */
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.App-logo {
|
|
||||||
animation: App-logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-header {
|
|
||||||
background-color: #282c34;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(10px + 2vmin);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-link {
|
|
||||||
color: #61dafb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes App-logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
16
src/App.js
16
src/App.js
|
|
@ -1,13 +1,23 @@
|
||||||
import { Component } from "react";
|
import { Component } from "react";
|
||||||
|
import Footer from "./shared-components/footer-component/Footer";
|
||||||
|
import Navbar from "./shared-components/navbar-component/Navbar";
|
||||||
|
import { BrowserRouter, Route } from "react-router-dom";
|
||||||
|
import HomePage from "./homePage/homePage";
|
||||||
import ListingsPage from "./listings-page/ListingsPage";
|
import ListingsPage from "./listings-page/ListingsPage";
|
||||||
|
import AgentPage from "./agent-page/AgentPage";
|
||||||
import Homepage from './homePage/Homepage';
|
// import ContactUs from "./shared-components/Contact-us/Contact-us";
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
<Homepage></Homepage>
|
<BrowserRouter>
|
||||||
|
<Navbar></Navbar>
|
||||||
|
<Route exact path="/" component={HomePage}></Route>
|
||||||
|
<Route path="/listings" component={ListingsPage}></Route>
|
||||||
|
<Route path="/agents" component={AgentPage}></Route>
|
||||||
|
</BrowserRouter>
|
||||||
|
<Footer></Footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
41
src/agent-page/AgentPage.js
Normal file
41
src/agent-page/AgentPage.js
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Agents from './Agents'
|
||||||
|
import './agent-page.css';
|
||||||
|
import Carousel from 'react-bootstrap/Carousel'
|
||||||
|
import Agent1 from "../images/Agent1.jpg";
|
||||||
|
import Agent2 from "../images/Agent2.jpg";
|
||||||
|
import Agent3 from "../images/Agent3.jpg";
|
||||||
|
import Agent4 from "../images/Agent4.jpg";
|
||||||
|
import Agent5 from "../images/Agent5.jpg";
|
||||||
|
import Agent6 from "../images/Agent6.jpg";
|
||||||
|
class AgentPage extends Component {
|
||||||
|
state={
|
||||||
|
agents: [
|
||||||
|
|
||||||
|
{title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1},
|
||||||
|
{title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2},
|
||||||
|
{title:'sales assistant',name: 'Anita', src: Agent3,word:'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.',id:3},
|
||||||
|
{title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4},
|
||||||
|
{title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5},
|
||||||
|
{title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6},
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
render(){
|
||||||
|
return(
|
||||||
|
<div className="container">
|
||||||
|
<div className="center blue-text text-darken-4">
|
||||||
|
<h1>Meet the team</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Agents agents={this.state.agents} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
displayAgents= (agent) => {
|
||||||
|
console.log(agent);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
export default AgentPage;
|
||||||
40
src/agent-page/Agents.js
Normal file
40
src/agent-page/Agents.js
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
import React from "react";
|
||||||
|
import AgentPage from "./AgentPage";
|
||||||
|
/* import {Link} from 'react-router-dom' */
|
||||||
|
import Card from "react-bootstrap/Card";
|
||||||
|
import Button from "react-bootstrap/Button";
|
||||||
|
|
||||||
|
const Agents = ({ agents }) => {
|
||||||
|
const agentlist = agents.map((agent) => {
|
||||||
|
return (
|
||||||
|
<div className="agent" key={agent.id}>
|
||||||
|
{}
|
||||||
|
<Card style={{ width: "18rem" }}>
|
||||||
|
<Card.Img variant="top" src={agent.src} />
|
||||||
|
<Card.Body>
|
||||||
|
<Card.Title>{agent.title}</Card.Title>
|
||||||
|
<Card.Text>{agent.name}</Card.Text>
|
||||||
|
<Card.Text>
|
||||||
|
{agent.word}
|
||||||
|
</Card.Text>
|
||||||
|
<Button variant="primary">VIEW</Button>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
console.log(agentlist);
|
||||||
|
return (
|
||||||
|
<div className="agent-list">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col m4">{agentlist[0]}</div>
|
||||||
|
<div className="col m4">{agentlist[1]}</div>
|
||||||
|
<div className="col m4">{agentlist[2]}</div>
|
||||||
|
<div className="col m4">{agentlist[3]}</div>
|
||||||
|
<div className="col m4">{agentlist[4]}</div>
|
||||||
|
<div className="col m4">{agentlist[5]}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Agents;
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
.agentPage {
|
||||||
|
background-image: url('../images/Agent1.jpg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 992px) {
|
||||||
|
.miniHero {
|
||||||
|
background-position-y: -150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.center{
|
||||||
|
height: 25vh; /* Magic here */
|
||||||
|
background-color: yellow;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import React, { Component } from "react";
|
|
||||||
|
|
||||||
class AgentPage extends Component {
|
|
||||||
render() {
|
|
||||||
return <div>AgentPage</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default AgentPage;
|
|
||||||
7
src/agent-page/workspace.code-workspace
Normal file
7
src/agent-page/workspace.code-workspace
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": "../../.."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
62
src/homePage/homePage.css
Normal file
62
src/homePage/homePage.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
.colored-section {
|
||||||
|
background-color: #ffe609;
|
||||||
|
color: #000000;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white-section {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title .container-fluid {
|
||||||
|
padding: 4% 34% 6%;
|
||||||
|
text-align: left;
|
||||||
|
font-family: "Georgia";
|
||||||
|
}
|
||||||
|
|
||||||
|
.housesIntro{
|
||||||
|
padding: 4% 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contactIntro{
|
||||||
|
padding-left: 30%;
|
||||||
|
padding-right: 30%;
|
||||||
|
padding-bottom: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carouselSection {
|
||||||
|
margin: 2% 8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerImg{
|
||||||
|
width: 2000px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-1{
|
||||||
|
padding-left: 40%;
|
||||||
|
padding-top: 10%;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formhelper{
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-1 {
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
border-color: transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-1:hover {
|
||||||
|
background-color: rgb(92, 92, 92);
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonhelper {
|
||||||
|
padding-left: 45%;
|
||||||
|
padding-top: 15px;
|
||||||
|
}
|
||||||
123
src/homePage/homePage.js
Normal file
123
src/homePage/homePage.js
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
import { Component } from "react";
|
||||||
|
import "./homePage.css";
|
||||||
|
import house1 from "../images/house1.jpg";
|
||||||
|
import house2 from "../images/house2.jpg";
|
||||||
|
import house3 from "../images/house3.jpg";
|
||||||
|
import Carousel from "react-bootstrap/Carousel";
|
||||||
|
|
||||||
|
class homePage extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
firstname: "",
|
||||||
|
lastname: "",
|
||||||
|
email: "",
|
||||||
|
message: "",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="homePage">
|
||||||
|
<section className="colored-section" id="title">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-12">
|
||||||
|
<h1 className="big-heading">YOU ARE NOT BUYING A HOUSE, </h1>
|
||||||
|
<h1 className="big-heading">YOU ARE BUYING A LIFESTYLE. </h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className="white-section" id="white-section">
|
||||||
|
<div className="housesIntro">
|
||||||
|
<Carousel>
|
||||||
|
<Carousel.Item>
|
||||||
|
<img className="headerImg" src={house1} alt="First House" />
|
||||||
|
</Carousel.Item>
|
||||||
|
<Carousel.Item>
|
||||||
|
<img className="headerImg" src={house2} alt="Second House" />
|
||||||
|
</Carousel.Item>
|
||||||
|
<Carousel.Item>
|
||||||
|
<img className="headerImg" src={house3} alt="Third House" />
|
||||||
|
</Carousel.Item>
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="colored-section" id="contact">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<div className="contactIntro">
|
||||||
|
<h2 className="heading-1">Contact Us</h2>
|
||||||
|
<form
|
||||||
|
id="contact-form"
|
||||||
|
onSubmit={this.handleSubmit.bind(this)}
|
||||||
|
method="POST"
|
||||||
|
>
|
||||||
|
<div className="formhelper row">
|
||||||
|
<div className="col-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="First Name"
|
||||||
|
value={this.state.name}
|
||||||
|
onChange={this.onNameChange.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Last Name"
|
||||||
|
value={this.state.name}
|
||||||
|
onChange={this.onNameChange.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="form-group">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Email Address"
|
||||||
|
aria-describedby="emailHelp"
|
||||||
|
value={this.state.email}
|
||||||
|
onChange={this.onEmailChange.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="form-group">
|
||||||
|
<textarea
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Message"
|
||||||
|
rows="5"
|
||||||
|
value={this.state.message}
|
||||||
|
onChange={this.onMessageChange.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="buttonhelper">
|
||||||
|
<button type="submit" className="button-1">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onNameChange(event) {
|
||||||
|
this.setState({ name: event.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
onEmailChange(event) {
|
||||||
|
this.setState({ email: event.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
onMessageChange(event) {
|
||||||
|
this.setState({ message: event.target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit(event) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default homePage;
|
||||||
10
src/homePage/homePage.test.js
Normal file
10
src/homePage/homePage.test.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from "react";
|
||||||
|
import { shallow } from "enzyme";
|
||||||
|
import HomePage from "./homePage";
|
||||||
|
|
||||||
|
describe("HomePage", () => {
|
||||||
|
test("matches snapshot", () => {
|
||||||
|
const wrapper = shallow(<HomePage />);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
1
src/homePage/index.js
Normal file
1
src/homePage/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from "./homePage";
|
||||||
BIN
src/images/Agent1.jpg
Normal file
BIN
src/images/Agent1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/images/Agent2.jpg
Normal file
BIN
src/images/Agent2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
src/images/Agent3.jpg
Normal file
BIN
src/images/Agent3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/images/Agent4.jpg
Normal file
BIN
src/images/Agent4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/images/Agent5.jpg
Normal file
BIN
src/images/Agent5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
src/images/Agent6.jpg
Normal file
BIN
src/images/Agent6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -163,7 +163,7 @@ class ListingsPage extends Component {
|
||||||
<div style={{ width: "100vm", height: "800px" }}>
|
<div style={{ width: "100vm", height: "800px" }}>
|
||||||
<MapWrapped
|
<MapWrapped
|
||||||
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
|
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
|
||||||
AIzaSyDD2ndQ18tRLgWUwGw18MHAgrfinSMWBYw`}
|
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
|
||||||
loadingElement={<div style={{ height: `100%` }} />}
|
loadingElement={<div style={{ height: `100%` }} />}
|
||||||
containerElement={<div style={{ height: `100%` }} />}
|
containerElement={<div style={{ height: `100%` }} />}
|
||||||
mapElement={<div style={{ height: `100%` }} />}
|
mapElement={<div style={{ height: `100%` }} />}
|
||||||
|
|
|
||||||
10
src/shared-components/contact-us/Contact-us.test.js
Normal file
10
src/shared-components/contact-us/Contact-us.test.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from "react";
|
||||||
|
import { shallow } from "enzyme";
|
||||||
|
import ContactUs from "./Contact-us";
|
||||||
|
|
||||||
|
describe("ContactUs", () => {
|
||||||
|
test("matches snapshot", () => {
|
||||||
|
const wrapper = shallow(<ContactUs />);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
|
||||||
|
class ContactUs extends Component {
|
||||||
|
render() {
|
||||||
|
return <div>ContactUs</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ContactUs;
|
||||||
1
src/shared-components/contact-us/index.js
Normal file
1
src/shared-components/contact-us/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default } from "./Contact-us";
|
||||||
12
src/shared-components/footer-component/Footer.css
Normal file
12
src/shared-components/footer-component/Footer.css
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
#footer{
|
||||||
|
text-align: center;
|
||||||
|
padding: 5% 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon{
|
||||||
|
margin: 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon:hover{
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
18
src/shared-components/footer-component/Footer.js
Normal file
18
src/shared-components/footer-component/Footer.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import React from "react";
|
||||||
|
import "./Footer.css";
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer>
|
||||||
|
<section id="footer">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<i class="fab fa-twitter social-icon"></i>
|
||||||
|
<i class="fab fa-facebook social-icon"></i>
|
||||||
|
<i class="fab fa-instagram social-icon"></i>
|
||||||
|
<i class="fas fa-envelope social-icon"></i>
|
||||||
|
<p class="">© Copyright SEG3125 - Group 3</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Footer;
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { shallow } from "enzyme";
|
import { shallow } from "enzyme";
|
||||||
import NavBar from "./navBar";
|
import Footer from "./Footer";
|
||||||
|
|
||||||
describe("NavBar", () => {
|
describe("Footer", () => {
|
||||||
test("matches snapshot", () => {
|
test("matches snapshot", () => {
|
||||||
const wrapper = shallow(<NavBar />);
|
const wrapper = shallow(<Footer />);
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { default } from "./navBar";
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import React, { Component } from "react";
|
|
||||||
|
|
||||||
class NavBar extends Component {
|
|
||||||
render() {
|
|
||||||
return <div>NavBar</div>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NavBar;
|
|
||||||
3
src/shared-components/navbar-component/Navbar.css
Normal file
3
src/shared-components/navbar-component/Navbar.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.Navbar{
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
49
src/shared-components/navbar-component/Navbar.js
Normal file
49
src/shared-components/navbar-component/Navbar.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Link, withRouter } from "react-router-dom";
|
||||||
|
import "./Navbar.css";
|
||||||
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||||
|
const Navbar = () => {
|
||||||
|
return (
|
||||||
|
/* Nav Bar */
|
||||||
|
<div className="Navbar">
|
||||||
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||||
|
<img src=""></img>
|
||||||
|
<a href="/" class="navbar-brand">
|
||||||
|
Kene's Cribs
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
class="navbar-toggler"
|
||||||
|
type="button"
|
||||||
|
data-toggle="collapse"
|
||||||
|
data-target="#navbarTogglerDemo02"
|
||||||
|
aria-controls="navbarTogglerDemo02"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||||||
|
<ul class="navbar-nav ml-auto">
|
||||||
|
<li class="nav-item">
|
||||||
|
<Link class="nav-link" exact to="/">
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<Link class="nav-link" to="/listings">
|
||||||
|
Listings
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<Link class="nav-link" to="/agents">
|
||||||
|
Agents
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withRouter(Navbar);
|
||||||
10
src/shared-components/navbar-component/Navbar.test.js
Normal file
10
src/shared-components/navbar-component/Navbar.test.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React from "react";
|
||||||
|
import { shallow } from "enzyme";
|
||||||
|
import Navbar from "./Navbar";
|
||||||
|
|
||||||
|
describe("Navbar", () => {
|
||||||
|
test("matches snapshot", () => {
|
||||||
|
const wrapper = shallow(<Navbar />);
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue