Analytics added / NewRestaurant.js added

src/components/Output/Restaurant.js

@@ -0,0 +1,50 @@
+import React from "react";
+import PictogramsSeparate from "./PictogramsSeparate";
+import DishList from "./DishList";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { extractTags } from "../../Services";
+import { useSelector } from "react-redux";
+
+export default function Restaurant(props) {
+  const restaurant = useSelector((state) => state.restaurant);
+  const showDishList = useSelector((state) => state.data.showDishList);
+
+  return (
+    <div className="restaurant-container">
+      <div className="restaurant-content">
+        <div className="restaurant-info">
+          <div
+            className="restaurant-hero"
+            style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+          ></div>
+          <h1>{restaurant.name}</h1>
+          <p>{restaurant.description}</p>
+          <hr />
+          <p>
+            Miejscowość:{" "}
+            <span className="restaurant-span">{restaurant.city}</span>
+          </p>
+          <p>
+            Godziny pracy:{" "}
+            <span className="restaurant-span">{restaurant.workingHours}</span>
+          </p>
+          {restaurant.phone && (
+            <p>
+              Kontakt:{" "}
+              <span className="restaurant-span">{restaurant.phone}</span>
+            </p>
+          )}
+          <hr />
+          <div className="restaurant-pictograms">
+            <PictogramsSeparate pictograms={extractTags(restaurant.tags)} />
+          </div>
+        </div>
+        <div className="restaurant-dishes">
+          <h3>Menu</h3>
+          {showDishList === false && <CircularProgress />}
+          {showDishList === true && <DishList />}
+        </div>
+      </div>
+    </div>
+  );
+}