new look / search list / restaurant view

src/components/Restaurant.js

@@ -0,0 +1,32 @@
+import React from "react";
+import Pictograms from "./Pictograms";
+import { useSelector } from "react-redux";
+
+export default function Restaurant(props) {
+  const restaurant = useSelector((state) => state.restaurant);
+  function extractTags(tags) {
+    var results = [];
+    for (let [key, value] of Object.entries(tags)) {
+      if (value === true) {
+        results.push(key);
+      }
+    }
+    return results;
+  }
+
+  return (
+    <div className="restaurant-container">
+      <div
+        className="restaurant-hero"
+        style={{ backgroundImage: "url(" + restaurant.imgUrl + ")" }}
+      >
+        <div className="restaurant-pictograms">
+          <Pictograms pictograms={extractTags(restaurant.tags)} />
+        </div>
+      </div>
+      <h1>{restaurant.name}</h1>
+      <p>{restaurant.city}</p>
+      <hr />
+    </div>
+  );
+}