batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #2 from ArcticHawk1/otherComponents

Browse source 
made the route for the pages, navbar and footer of the application
This commit is contained in:
Samuel Oyediran 2021-03-31 14:49:49 -04:00 committed by GitHub
commit 57719119da
23 changed files with 20781 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20436
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

33
public/index.html
View file

@ -24,9 +24,38 @@
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`.
-->
<!-- fontawesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>React App</title>
<link
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>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

38
src/App.css
View file

@ -1,38 +1,10 @@
.App {
body{
margin: 0;
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
/* .App {
text-align: center;
} */
@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);
}
}

25
src/App.js
View file

@ -1,18 +1,27 @@
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 AgentPage from "./agent-page/AgentPage";
// import ContactUs from "./shared-components/Contact-us/Contact-us";
import Homepage from './homePage/Homepage';
import Homepage from "./homePage/Homepage";
class App extends Component {
render() {
return (
<div className="App">
{/* <Homepage/> */}
<Homepage/>
<BrowserRouter>
<Navbar></Navbar>
<Route path="/home" component={HomePage}></Route>
<Route path="/listings" component={ListingsPage}></Route>
<Route path="/agents" component={AgentPage}></Route>
{/* <Route path="/contact-us" component={ContactUs}></Route> */}
</BrowserRouter>
<Homepage></Homepage>
<Footer></Footer>
</div>
);
}

62
src/homePage/homePage.css Normal file
View 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
View 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
View 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
View file

@ -0,0 +1 @@
export { default } from "./homePage";

0
src/shared-components/contact-us/contactUs.css → src/shared-components/contact-us/Contact-us.css
View file

10
src/shared-components/contact-us/Contact-us.test.js Normal file
View 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();
});
});

9
src/shared-components/contact-us/contact-us.js
View file

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

@ -0,0 +1 @@
export { default } from "./Contact-us";

12
src/shared-components/footer-component/Footer.css Normal file
View 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
View 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;

6
src/shared-components/navBar/navBar.test.js → src/shared-components/footer-component/Footer.test.js
View file

@ -1,10 +1,10 @@
import React from "react";
import { shallow } from "enzyme";
import NavBar from "./navBar";
import Footer from "./Footer";
describe("NavBar", () => {
describe("Footer", () => {
test("matches snapshot", () => {
const wrapper = shallow(<NavBar />);
const wrapper = shallow(<Footer />);
expect(wrapper).toMatchSnapshot();
});
});

0
src/shared-components/footer/footer.css
View file

0
src/shared-components/footer/footer.js
View file

1
src/shared-components/navBar/index.js
View file

@ -1 +0,0 @@
export { default } from "./navBar";

0
src/shared-components/navBar/navBar.css
View file

9
src/shared-components/navBar/navBar.js
View file

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

@ -0,0 +1,3 @@
.Navbar{
background-color: pink;
}

54
src/shared-components/navbar-component/Navbar.js Normal file
View file

@ -0,0 +1,54 @@
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" 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>
<li class="nav-item">
<Link class="nav-link" to="/contact-us">
Contact Us
</Link>
</li>
</ul>
</div>
</nav>
</div>
);
};
export default withRouter(Navbar);

10
src/shared-components/navbar-component/Navbar.test.js Normal file
View 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();
});
});