feat: added the ListSearchComponent

public/styles/main.css

@@ -480,6 +480,14 @@ footer .nav-link i {
   text-align: left;
 }
 
+.grid{
+  height: 75vh;
+  position: absolute;
+  z-index: 1;
+  top: 32px;
+  left: 25px;
+}
+
 .share-modal .link {
   flex-grow: 100;
   display: inline-block;

src/App.jsx

@@ -17,6 +17,7 @@ import googleMapAPI from "../utils/googlemaps";
 import debounce from "lodash.debounce";
 import classnames from "classnames";
 import {ShareModal} from "./components/ShareModal";
+import {Grid} from "./components/Grid"
 
 const translations = {
   en: require("./translations/en.json"),
@@ -56,6 +57,10 @@ export function App({gmApiKey, gaTag}) {
   const [isSlideUp, setIsSlideUp] = useState(false);
   const [userToken, setUserToken] = useState(null);
 
+  console.log(results, "🌸");
+  console.log(cardData, "💕");
+
+
   const handleSearchQuery = (query) => {
     googleMapFn.search(query, searchResultCallback);
   };
@@ -586,6 +591,7 @@ export function App({gmApiKey, gaTag}) {
         {userToken && <Metrics/>}
         <FunFacts/>
       </div>
+<Grid className="grid"/>
       <div className="footer">
         <div className="container-lg">
           <footer>

src/components/ListCard.css

@@ -0,0 +1,76 @@
+@font-face {
+    font-family: "Futura";
+    src: url("../assets/futura/Futura\ Light\ font.ttf");
+  }
+
+  .modal-card-container {
+    padding: 10px;
+    border-radius: 2%;
+
+  }
+  .modal-card-container:hover {
+    border: solid thin;
+    border-color: #2f97d1;
+    opacity: 70%;
+  }
+
+  .modal-card-picture {
+    height: 100px;
+    width: 100px;
+    background-color: antiquewhite;
+    border-radius: 5%;
+  }
+
+  .modal-card-contents {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+    align-items: center;
+  }
+
+  .modal-card-details{
+    display:flex;
+    flex-direction: column;
+  }
+  .shop-list-name {
+    font-family: "Futura";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 23px;
+    display: flex;
+    align-items: flex-end;
+    color: #2f97d1;
+  }
+  .location-icon {
+    width: 20px;
+    fill: #f8b838;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .shop-list-body {
+    font-family: "Futura";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    color: #666666;
+    margin-left: 10px;
+  }
+
+  a:link {
+    text-decoration: none;
+  }
+
+  a:visited {
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  a:active {
+    text-decoration: none;
+  }
+

src/components/ListCard.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import "./ListCard.css";
+import locationButton from "/images/map-pin-gold.svg";
+
+export const ListCard = ({ data }) => {
+  console.log(data.data);
+  const cardRender = data.data.map((info) => {
+    console.log(info);
+    return (
+      <div className="modal-card-container">
+        <a href={info.website}>
+          <div className="modal-card-contents">
+            <img src={info.photos[0].url} className="modal-card-picture" />
+            <div className="modal-card-details">
+              <p className="shop-list-name">
+                <img src={locationButton} className="location-icon" />
+                {info.name}
+              </p>
+              <p className="shop-list-body">{info.grouped_tags["Water"].map((item)=>{return `${item} `})}</p>
+            </div>
+          </div>
+        </a>
+      </div>
+    );
+  });
+  return <>{cardRender}</>;
+};

src/components/ListGrid.css

@@ -0,0 +1,8 @@
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(1, fr1);
+    gap: 10px;
+    width: 100%;
+
+   }
+

src/components/ListGrid.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import "./ListGrid.css";
+
+export const Grid = ({children}) => {
+  return (
+    <div className="grid-container">
+     {children}
+    </div>
+  );
+};

src/components/ListModal.css

@@ -0,0 +1,12 @@
+.modal-container {
+    height: 50vh;
+    z-index: 1;
+    position: absolute;
+    bottom: 5vh;
+    background-color: #ffffff;
+    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 10px 10px 0px 0px;
+    padding: 20px;
+    overflow: scroll;
+  }
+

src/components/ListModal.jsx

@@ -0,0 +1,6 @@
+import React, { useEffect, useState } from "react";
+import "./ListModal.css";
+
+export const ListModal = ( {children}) => {
+  return <div className="modal-container">{children}</div>;
+};

src/components/ListSearchComponent.jsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import "./App.css";
+import axios from "axios";
+import { ListModal } from "./Components/ListModal";
+import { ListCard } from "./Components/ListCard";
+import { ListGrid } from "./Components/Grid";
+
+function ListSearchComponent() {
+  const [data, setData] = useState();
+
+  //async function to dataSet
+  const getData = async () => {
+    await axios.get(`./data/data.json`).then((response) => {
+      setData(response.data);
+    });
+  };
+
+  //run get Data
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return <div className="App">
+<ListModal>
+  <ListGrid>
+  {data && <ListCard data={data}/>}
+  </ListGrid>
+</ListModal>
+
+  </div>;
+}
+
+export default ListSearchComponent;

src/components/Search.jsx

@@ -8,7 +8,6 @@ export function Search({ results, onSearch, onReset }) {
   const debounced = useDebouncedCallback(onSearch, 500, { leading: true });
   const showResultInputs =
     results.length > 0 ? "maps-location-search-input-with-results" : "";
-
   const handleReset = () => {
     inputRef.current.value = "";
     onReset();