#61: Create restaurant details page

software-students-fall2021 · Nov 2, 2021 · 9128943 · 9128943
1 parent 79b40d4
commit 9128943
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 17 deletions.
diff --git a/front-end/src/img/restauraunt-placeholder-large.jpeg b/front-end/src/img/restauraunt-placeholder-large.jpeg
diff --git a/front-end/src/pages/App.jsx b/front-end/src/pages/App.jsx
@@ -1,26 +1,32 @@
-import './App.css';
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
-import Home from './Home';
-import CreateRoom from './CreateRoom';
-import InviteCode from './InviteCode';
-import JoinRoom from './JoinRoom';
-import TeamPage from './TeamPage';
-import User from './User';
-import Footer from '../components/Footer';
-import Header from '../components/Header';
+import "./App.css";
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import Home from "./Home";
+import CreateRoom from "./CreateRoom";
+import InviteCode from "./InviteCode";
+import JoinRoom from "./JoinRoom";
+import TeamPage from "./TeamPage";
+import User from "./User";
+import Footer from "../components/Footer";
+import Header from "../components/Header";
+import RestaurauntDetails from "../pages/RestaurantDetails";
 
 function App() {
   return (
     <div className="App">
       <Header />
       <Switch>
-        <Route path='/' component={Home} exact />
-        <Route path='/create' component={CreateRoom} exact />
-        <Route path='/invite' component={InviteCode} exact />
-        <Route path='/join' component={JoinRoom} exact />
-        <Route path='/team' component={TeamPage} exact />
-        <Route path='/new-user' component={User} exact />
+        <Route path="/" component={Home} exact />
+        <Route path="/create" component={CreateRoom} exact />
+        <Route path="/invite" component={InviteCode} exact />
+        <Route path="/join" component={JoinRoom} exact />
+        <Route path="/team" component={TeamPage} exact />
+        <Route path="/new-user" component={User} exact />
+        <Route
+          path="/restauraunt-detail"
+          component={RestaurauntDetails}
+          exact
+        />
       </Switch>
       <Footer />
     </div>

diff --git a/front-end/src/pages/RestaurantDetails.css b/front-end/src/pages/RestaurantDetails.css
@@ -0,0 +1,34 @@
+.RestaurantDetails {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.RestaurantDetails img {
+  width: 75%;
+}
+
+.RestaurantDetails .google-maps-iframe {
+  border: none;
+}
+
+.RestaurantDetails .page-container {
+  width: 70%;
+  padding-bottom: 5%;
+}
+
+.RestaurantDetails .map-container {
+  display: flex;
+  justify-content: center;
+}
+
+.RestaurantDetails .basic-info {
+  text-align: left;
+  width: 100%;
+  background-color: white;
+  padding: 15px;
+  border-radius: 10px;
+  align-items: center;
+  box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.1);
+}
diff --git a/front-end/src/pages/RestaurantDetails.jsx b/front-end/src/pages/RestaurantDetails.jsx
@@ -0,0 +1,73 @@
+import "./RestaurantDetails.css";
+import restaurauntPlaceholder from "../img/restauraunt-placeholder-large.jpeg";
+import React from "react";
+import Button from "../components/Button";
+
+const data = {
+  restaurant_name: "Silver Spurs",
+  restaurant_phone: "(212) 228-2333",
+  restaurant_website:
+    "http://www.grubhub.com/nyc/silver-spurs-on-laguardia-place/",
+  hours: "Daily: 6am-11pm",
+  price_range: "$$",
+  restaurant_id: 4072702673999819,
+  cuisines: ["American", "Burgers", "Diner"],
+  address: {
+    city: "New York",
+    state: "NY",
+    postal_code: "10012",
+    street: "490 Laguardia Pl",
+    formatted: "490 Laguardia Pl New York, NY 10012",
+  },
+  geo: { lat: 40.727026, lon: -73.999819 },
+  menus: [],
+  last_updated: "2020-10-01T15:13:42.654Z",
+};
+
+function RestaurantDetails(props) {
+  return (
+    <div className="RestaurantDetails">
+      <div className="page-container">
+        <div className="page-container-item">
+          <h3>The Gourmet Soup and Bread House</h3>
+          <img src={restaurauntPlaceholder}></img>
+        </div>
+        <h4>Restauraunt Info</h4>
+        <div className="basic-info">
+          <p>
+            <b>Address:</b> {data.address.formatted}
+          </p>
+          <p>
+            <b>Phone:</b> {data.restaurant_phone}
+          </p>
+          <p>
+            <b>Website:</b>{" "}
+            <a href={data.restaurant_website}>{data.restaurant_website}</a>
+          </p>
+          <p>
+            <b>Hours:</b> {data.hours}
+          </p>
+          <p>
+            <b>Cuisine Types:</b> {data.cuisines.join(", ")}
+          </p>
+        </div>
+        <div className="page-container-item">
+          <h4>Directions</h4>
+          <div className="map-container">
+            <iframe
+              width="600"
+              height="450"
+              loading="lazy"
+              className="google-maps-iframe"
+              allowfullscreen
+              src={`https://www.google.com/maps/embed/v1/place?q=${data.geo.lat},${data.geo.lon}&key=AIzaSyB_AxybqGJ-K6-3Jr9efLKXdZX_L7pMJ8I`}
+            ></iframe>
+          </div>
+          <Button>Reserve a Table</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RestaurantDetails;