card further work

src/components/CardRestaurant.js

@@ -1,17 +1,39 @@
 import React from "react";
+import Pictograms from "./Pictograms";
 
 export default function CardRestaurant(props) {
   return (
     <div className="card-restaurant">
       <div className="card-img"></div>
       <div className="card-info">
-        <h1>{props.name}</h1>
-        <hr />
-        <h3>Miasto: {props.city}</h3>
-        <h3>Godziny otwarcia: {props.hours}</h3>
-        <p>
-          Jakiś krótki opis restauracji. Coś tam że jest przytulnie i elegancko.
-        </p>
+        <div className="title-info">
+          <h1>{props.name}</h1>
+          <hr />
+          <h3>Miasto: {props.city}</h3>
+          <h3>Godziny otwarcia: {props.hours}</h3>
+        </div>
+        <div className="card-description">
+          <p>
+            Jakiś krótki opis restauracji. Coś tam że jest przytulnie i
+            elegancko.
+          </p>
+        </div>
+        <div className="card-pictograms">
+          <Pictograms
+            pictograms={[
+              "alcohol",
+              "card",
+              "delivery",
+              "glutenFree",
+              "vegan",
+              "vegetarian",
+              "eggs",
+              "gluten",
+              "lactose",
+              "lactoseFree",
+            ]}
+          />
+        </div>
       </div>
     </div>
   );

src/components/Pictograms.js

@@ -0,0 +1,62 @@
+import React from "react";
+// ICONS
+import alcohol from "../public/i_alcohol.svg";
+import card from "../public/i_card.svg";
+import delivery from "../public/i_delivery.svg";
+import eggs from "../public/i_eggs.svg";
+import gluten from "../public/i_gluten.svg";
+import glutenFree from "../public/i_glutenFree.svg";
+import lactose from "../public/i_lactose.svg";
+import lactoseFree from "../public/i_lactoseFree.svg";
+import peanuts from "../public/i_peanuts.svg";
+import pets from "../public/i_pets.svg";
+import seaFood from "../public/i_seaFood.svg";
+import sesame from "../public/i_sesame.svg";
+import soy from "../public/i_soy.svg";
+import vegan from "../public/i_vegan.svg";
+import vegetarian from "../public/i_vegetarian.svg";
+
+function getImage(name) {
+  switch (name) {
+    case "alcohol":
+      return alcohol;
+    case "card":
+      return card;
+    case "delivery":
+      return delivery;
+    case "eggs":
+      return eggs;
+    case "gluten":
+      return gluten;
+    case "glutenFree":
+      return glutenFree;
+    case "lactose":
+      return lactose;
+    case "lactoseFree":
+      return lactoseFree;
+    case "peanuts":
+      return peanuts;
+    case "pets":
+      return pets;
+    case "seaFood":
+      return seaFood;
+    case "sesame":
+      return sesame;
+    case "soy":
+      return soy;
+    case "vegan":
+      return vegan;
+    case "vegetarian":
+      return vegetarian;
+    default:
+      return false;
+  }
+}
+
+export default function (props) {
+  const pictograms = props.pictograms.map((pictogram) => (
+    <img className="pictogram" src={getImage(pictogram)} alt={pictogram} />
+  ));
+
+  return <div className="pictograms-container">{pictograms}</div>;
+}

src/components/SearchResults.js

@@ -4,25 +4,27 @@ import { useSelector } from "react-redux";
 
 export default function SearchResults() {
   var results = useSelector((store) => store.searchResults);
+  const array = Array.from(results);
+  var count = results.length;
+  const restaurants = array.map((restaurant) => (
+    <li key={restaurant._id}>
+      <CardRestaurant
+        name={restaurant.name}
+        city={restaurant.city}
+        imgUrl={restaurant.imgUrl}
+        hours={restaurant.workingHours}
+        tags={restaurant.tags}
+      />
+    </li>
+  ));
 
   return (
     <div className="search-results">
-      <CardRestaurant
-        name="Kuchnie Świata"
-        city="Mikołajki"
-        hours="7:00 - 23:00"
-      />
-      <CardRestaurant
-        name="Grzmiące Patyki"
-        city="Ciechanów"
-        hours="7:00 - 23:00"
-      />
-      <CardRestaurant name="Naruto Sushi" city="Tokio" hours="7:00 - 23:00" />
-      <CardRestaurant
-        name="Gówno"
-        city="Dąbrowa górnicza"
-        hours="7:00 - 23:00"
-      />
+      <div className="results-count">
+        <p>Znaleziono: {count}</p>
+        <hr />
+      </div>
+      <ul>{restaurants}</ul>
     </div>
   );
 }

src/components/TopBar.js

@@ -1,11 +1,23 @@
 import React from "react";
 import ButtonPrimary from "./ButtonPrimary";
 import logo from "../public/logo_white.svg";
+import { useDispatch } from "react-redux";
+import { setAppMode } from "../actions";
 
 export default function TopBar() {
+  const dispatch = useDispatch();
+  const imgClick = () => {
+    dispatch(setAppMode("APP_INIT"));
+  };
+
   return (
     <div className="topBar">
-      <img src={logo} className="topBarLogo" alt="Menui logo" />
+      <img
+        src={logo}
+        className="topBarLogo"
+        alt="Menui logo"
+        onClick={() => imgClick()}
+      />
       <div>
         <ButtonPrimary text="Dodaj Lokal" />
         <ButtonPrimary text="Logowanie" />