reza added cart

package.json

@@ -18,6 +18,7 @@
     "create-index": "^2.6.0",
     "history": "^5.0.0",
     "jalali-moment": "^3.3.10",
+    "mapir-react-component": "^1.8.1",
     "prettier": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

public/index.html

@@ -9,6 +9,10 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link
+      href="https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css"
+      rel="stylesheet"
+    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/AppRouter.js

@@ -14,6 +14,7 @@ import QRScan from './views/QRScan/index';
 import Activation from './views/Activation/index';
 import ChatList from './views/ChatList/index';
 import Chatroom from './views/ChatRoom/index';
+import Cart from './views/Cart/index';
 
 class AppRouter extends Component {
   constructor(props) {
@@ -69,6 +70,9 @@ class AppRouter extends Component {
           <Route exact path={'/chatroom'}>
             <ChatList />
           </Route>
+          <Route exact path={'/cart'}>
+            <Cart />
+          </Route>
           {
             window.innerWidth < 1000 ?
             <Route exact path={'/chatroom/:id'}>

src/views/Cart/Item/index.js

@@ -0,0 +1,86 @@
+import React from "react";
+import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    info: {
+      strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
+      p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
+      span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
+    },
+    price: {
+      strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60,
+      span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
+    },
+    counter: {
+      button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
+      span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65,
+    },
+    delete: {
+      span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75,
+    },
+  },
+};
+
+export default function Item(props) {
+  const { data, handleCounter, handleDelete } = props;
+  return (
+    <tr className="cart-item d-flex align-items-center">
+      <td className="cart-item__info d-flex">
+        <img src={data.image} alt={data.title} />
+        <div className="d-flex flex-column justify-content-center">
+          <strong style={{ fontSize: fontSize.desktop.info.strong }}>
+            {data.title}
+          </strong>
+          <p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p>
+          <span style={{ fontSize: fontSize.desktop.info.span }}>
+            {data.options}بسته الحاقی:
+          </span>
+        </div>
+      </td>
+      <td className="cart-item__price d-flex flex-column justify-content-center align-items-center">
+        <strong style={{ fontSize: fontSize.desktop.price.strong }}>
+          {data.price} تومان
+        </strong>
+        <span style={{ fontSize: fontSize.desktop.price.span }}>
+          {data.slicePrice} قیمت هر واحد
+        </span>
+      </td>
+      <td className="cart-item__counter d-flex align-items-center">
+        <div className="cart-item__counter--box d-flex justify-content-around align-items-center">
+          <button
+            onClick={() => handleCounter("increase", data.id)}
+            style={{ fontSize: fontSize.desktop.counter.button }}
+          >
+            +
+          </button>
+          <span style={{ fontSize: fontSize.desktop.counter.span }}>
+            {data.number}
+          </span>
+          <button
+            onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)}
+            style={{ fontSize: fontSize.desktop.counter.button }}
+          >
+            -
+          </button>
+        </div>
+      </td>
+      <td className="cart-item__delete d-flex align-items-center justify-content-center">
+        <DeleteOutlineOutlinedIcon
+          style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
+          onClick={() => handleDelete(data.id)}
+        />
+        <span
+          onClick={() => handleDelete(data.id)}
+          style={{ fontSize: fontSize.desktop.delete.span }}
+        >
+          حذف
+        </span>
+      </td>
+    </tr>
+  );
+}

src/views/Cart/Item/index.scss

@@ -0,0 +1,63 @@
+.cart-item{
+  justify-content: space-between;
+  border-top: 1px solid #eee;
+  padding: 15px 0px;
+  &__info{
+    img{
+      height: 100px;
+      border-radius: 10px;
+      margin-left: 10px;
+    }
+    div{
+      strong{
+        font-family: numeralBold;
+        color: #373737;
+      }
+      p{
+        font-family: numeralLight;
+        color: #00CC69;
+        margin: 0px;
+        letter-spacing: -1px;
+      }
+      span{
+        font-family: numeralLight;
+        color: #2580EC;
+        letter-spacing: -1px;
+      }
+    }
+  }
+  &__price{
+    color: #4D4D4F;
+    strong{
+      font-family: numeralBold;
+    }
+    span{
+      font-family: numeralLight;
+    }
+  }
+  &__counter{
+    &--box{
+      padding: 5px 10px;
+      border: 1px solid rgb(177, 177, 177);
+      border-radius: 8px;
+      button{
+        border: 0px;
+        background-color: white;
+        color: #4D4D4F;
+      }
+      span{
+        margin: 0px 15px;
+        color: #4D4D4F;
+
+      }
+    }
+    
+  }
+  &__delete{
+    margin-left: 20px;
+    span{
+      font-family: numeralLight;
+      color : #FC120A;
+    }
+  }
+}

src/views/Cart/index.js

@@ -0,0 +1,160 @@
+import React, { Component } from "react";
+import Navbar from "../Home/Navbar/index";
+import Footer from "../Home/Footer/index";
+import Item from "./Item/index";
+
+import book1 from "../../assets/images/book1.png";
+
+import "./index.scss";
+
+const maxDesktopSize = 1250;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
+    th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
+    h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
+    h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+    strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
+    span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
+  },
+};
+export default class Cart extends Component {
+  state = {
+    totalPrice: null,
+    list: [
+      {
+        id: 0,
+        title: "ریاضیات گسسته خیلی پیشرفته",
+        subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
+        options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
+        image: book1,
+        slicePrice: 200000,
+        number: 1,
+        price: 1899900,
+      },
+      {
+        id: 1,
+        title: "ریاضیات گسسته خیلی پیشرفته",
+        subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
+        options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
+        image: book1,
+        slicePrice: 300000,
+        number: 1,
+        price: 2500000,
+      },
+      {
+        id: 2,
+        title: "ریاضیات گسسته خیلی پیشرفته",
+        subTitle: "در این قسمت توضیح بسیار کوتاهی قرار می گیرد",
+        options: "بسته‌های الحاقی: کیف، کفش و کوله پشتی",
+        image: book1,
+        slicePrice: 150000,
+        number: 1,
+        price: 1000000,
+      },
+    ],
+  };
+
+  handleCounter = (type, id) => {
+    if (type === "increase") {
+      this.setState((prevState) => ({
+        list: prevState.list.map((item) =>
+          item.id === id ? { ...item, number: item.number + 1 } : item
+        ),
+      }));
+    } else {
+      this.setState((prevState) => ({
+        list: prevState.list.map((item) =>
+          item.id === id ? { ...item, number: item.number - 1 } : item
+        ),
+      }));
+    }
+  };
+
+  handleDelete = (id) => {
+    let list = this.state.list.filter((item) => item.id !== id);
+    this.setState({
+      list: list
+    })
+  };
+  render() {
+    return (
+      <>
+        {window.innerWidth > 1000 ? (
+          <>
+            <div className="cart d-flex flex-column">
+              <Navbar />
+              <div className="d-flex">
+                <section className="cart__right d-flex flex-column">
+                  <header>
+                    <h1 style={{ fontSize: fontSize.desktop.h1 }}>سبد خرید</h1>
+                  </header>
+                  <table>
+                    {this.state.list.map((item, i) => (
+                      <Item
+                        handleDelete={this.handleDelete}
+                        handleCounter={this.handleCounter}
+                        data={item}
+                        key={i}
+                      />
+                    ))}
+                  </table>
+                  {this.state.totalPrice ? (
+                    <div className="cart__right--price d-flex justify-content-end">
+                      <div className="d-flex ml-2">جمع کل سبد خرید</div>
+                      <div className="d-flex">
+                        <strong>تومان {this.state.totalPrice}</strong>
+                      </div>
+                    </div>
+                  ) : null}
+                </section>
+                <section className="cart__left d-flex flex-column p-3">
+                  <header className="cart__left--header d-flex flex-column">
+                    <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+                      روشهای ارسال
+                    </h2>
+                    <div className="d-flex justify-content-between">
+                      {this.props.payMethods.map((item, i) => (
+                        <PayMethod data={item} key={i} />
+                      ))}
+                    </div>
+                  </header>
+                  <button>پرداخت</button>
+                </section>
+              </div>
+            </div>
+            <Footer />
+          </>
+        ) : null}
+      </>
+    );
+  }
+}
+
+const PayMethod = (props) => {
+  return (
+    <div className="payment-methods d-flex justify-content-between align-items-center">
+      <strong style={{ fontSize: fontSize.desktop.strong }}>
+        {props.data.name}
+      </strong>
+      <div className="d-flex flex-column align-items-center">
+        <h3 style={{ fontSize: fontSize.desktop.h3 }}>{props.data.price}</h3>
+        <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
+      </div>
+    </div>
+  );
+};
+
+Cart.defaultProps = {
+  payMethods: [
+    {
+      name: "ارسال با پست پیشتاز",
+      price: 36.891,
+    },
+    {
+      name: "ارسال با پیک موتوری",
+      price: 36.891,
+    },
+  ],
+};

src/views/Cart/index.scss

@@ -0,0 +1,69 @@
+.cart {
+  width: 100vw;
+  height: 100vh;
+  max-width: 1250px;
+  margin: 0px auto;
+  padding: 0px 10px;
+  &__right {
+    flex: 4;
+    padding: 10px 0px 0px;
+    header {
+      h1 {
+        font-family: numeralBold;
+        color: #373737;
+      }
+    }
+    table {
+      tr{
+        th {
+          font-family: numeralLight;
+          color: #afafaf;
+        }
+      }
+      
+    }
+  }
+  &__left {
+    flex: 1.2;
+    box-shadow: 0px 0px 13px #D5D5D5B0;
+    border-radius: 13px;
+    margin-right: 30px;
+    &--header{
+      h2{
+        font-family: numeralBold;
+        color: #2580EC;
+      }
+    }
+    button{
+      justify-self: flex-end;
+      padding: 12px;
+      width: 100%;
+      font-family: numeralLight;
+      color: white;
+      background-color: #6CBE44;
+      border: 0px;
+      border-radius: 10px;
+      margin-top: 50px;
+    }
+    .payment-methods{
+      padding: 6px;
+      border-radius: 10px;
+      border: 1px solid #88A9FF;
+      margin-top: 10px;
+      h3, strong, span{
+        font-family: numeralLight;
+        font-weight: 100;
+        margin: 0px;
+      }
+      strong{
+        width: 50%;
+        color: #678EF8;
+        letter-spacing: -1px;
+      }
+      h3, span{
+        color: #02A255;
+        font-family: numeralMedium;
+      }
+    }
+  }
+}

src/views/Contact/Location/Location.js

@@ -0,0 +1,39 @@
+import Mapir from "mapir-react-component";
+
+import blueMark from '../../../assets/icons/marker-blue.png';
+
+import './index.scss';
+
+const Map = Mapir.setToken({
+  transformRequest: (url) => {
+    return {
+      url: url,
+      headers: {
+        "x-api-key":
+          "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q", //Mapir api key
+        "Mapir-SDK": "reactjs",
+      },
+    };
+  },
+});
+
+export default function location() {
+  return (
+    <Mapir
+      userLocation={true}
+      Map={Map}
+      apiKey={
+        "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIn0.eyJhdWQiOiIxNDc1OSIsImp0aSI6IjliNzIxYmZhZDZlMGI3MzYxMzFiMTMyNjEyZDQ1M2E3ZDg4YTEzMjc2ZDUyYTA5ZDNmOThiNWFjZTM1NDZlMmMwZDU2M2Y5YzY3N2U0NGFhIiwiaWF0IjoxNjI1NjY2NzI2LCJuYmYiOjE2MjU2NjY3MjYsImV4cCI6MTYyODI1ODcyNiwic3ViIjoiIiwic2NvcGVzIjpbImJhc2ljIl19.OIjSLWyNCGALY2C0EFDGPEEUbPqOxL6GxCDkeX1B5C218eTk0qkmlGs8z4E87Y-qL7_PG814UZwcngjdRybVwabMtgfHsJj7DRDtrdBzCW7HRlJXqrSRG7xOuJmFhcn4-HtXRQUOEUn8quQukXPek8zvMtRBoMNsefS5s6es2oAg7Fmv0o5T2uZyDzMnRAfrTb1SKtv52Q_yXWYPtQNZdZcwe9Ed-ZkGeAXuTY2tafow92Oq8mmRxrzaq9Ne3gtu98UqXA3rwzRaQ1ToXU_Tcjh5UCVS6hZAzhI-GQk7KfrLbOOyDCxfd9v7_qXnIkRR6dd3bZ69H-jvlytaxMl51Q"
+      }
+      center={[51.401464,35.700815 ]}
+    >
+      <Mapir.Marker
+        coordinates={[51.401464,35.700815 ]}
+        anchor="top"
+        Image={blueMark}
+        style={{width:20, height: 20}}
+        className="marker"
+      ></Mapir.Marker>
+    </Mapir>
+  );
+}

src/views/Contact/Location/index.scss

@@ -0,0 +1,9 @@
+.mapboxgl-map{
+  width: 100% !important;
+  height: 100% !important;
+  border-radius: 20px !important;
+  .marker{
+    width: 20px;
+    height: 20px
+  }
+}

src/views/Contact/index.js

@@ -6,58 +6,75 @@ import Select from "./Select/index";
 import location from "../../assets/icons/location.png";
 import home from "../../assets/icons/home.png";
 import contact from "../../assets/icons/contact.png";
-// import Location from "./Location/Location";
+import Location from "./Location/Location";
 
 import "./index.scss";
+
+const maxDesktopSize = 1250;
+const maxMobileSize = 550;
+
+const fontSize = {
+  desktop: {
+    h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
+    p : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80,
+    span : window.innerWidth > maxDesktopSize ? 16: window.innerWidth / 80,
+  }
+}
 export default class Contact extends Component {
   render() {
     return (
       <>
-        <div className="contact d-flex flex-column align-items-center">
-          <Navbar page={"contact"} />
-          <div className="contact__forms d-flex">
-            <div className="contact__forms--right d-flex flex-column">
-              <h1>تماس با ما</h1>
-              <p>
-                برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
-                پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
-              </p>
-              <Input label={"نام‌و‌نام خانوادگی"} name={"name"} />
-              <Input label={"شماره تماس"} name={"mobile"} />
-              <Select options={["همه", "پرفروش"]} />
-              <Input label={"موضوع پیام"} name={"subject"} />
-              <textarea
-                placeholder="متن پیام"
-                name="description"
-                rows="5"
-              ></textarea>
-              <button>ارسال</button>
-            </div>
-            <div className="contact__forms--left d-flex flex-column">
-              <div className="contact__location d-flex align-items-center">
-                <img src={location} alt="آدرس" className="m-1" />
-                <p>تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار</p>
-              </div>
-              <div
-                className="d-flex align-items-center mt-1"
-                style={{ width: "55%", justifyContent: "space-between" }}
-              >
-                <div className="d-flex align-items-center">
-                  <span>02163462405</span>
-                  <img src={contact} alt="تماس" className="m-1" />
+        {window.innerWidth > 1000 ? (
+          <>
+            <div className="contact d-flex flex-column align-items-center">
+              <Navbar page={"contact"} />
+              <div className="contact__forms d-flex">
+                <div className="contact__forms--right d-flex flex-column">
+                  <h1 style={{ fontSize: fontSize.desktop.h1 }}>تماس با ما</h1>
+                  <p style={{ fontSize: fontSize.desktop.p }}>
+                    برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده
+                    کنید و پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
+                  </p>
+                  <Input label={"نام‌و‌نام خانوادگی"} name={"name"} />
+                  <Input label={"شماره تماس"} name={"mobile"} />
+                  <Select options={["همه", "پرفروش"]} />
+                  <Input label={"موضوع پیام"} name={"subject"} />
+                  <textarea
+                    placeholder="متن پیام"
+                    name="description"
+                    rows="5"
+                  ></textarea>
+                  <button>ارسال</button>
                 </div>
-                <div className="d-flex align-items-center">
-                  <span>Info@Danovin.ir</span>
-                  <img src={home} alt="خانه" className="m-1" />
+                <div className="contact__forms--left d-flex flex-column">
+                  <div className="contact__location d-flex align-items-center">
+                    <img src={location} alt="آدرس" className="m-1" />
+                    <p style={{ fontSize: fontSize.desktop.p }}>
+                      تهران خیابان انقلاب اسلامی بن بست سروش پلاک 2 طبقه چهار
+                    </p>
+                  </div>
+                  <div
+                    className="d-flex align-items-center mt-1"
+                    style={{ width: "55%", justifyContent: "space-between" }}
+                  >
+                    <div className="d-flex align-items-center">
+                      <span style={{ fontSize: fontSize.desktop.span }}>02163462405</span>
+                      <img src={contact} alt="تماس" className="m-1" />
+                    </div>
+                    <div className="d-flex align-items-center">
+                      <span style={{ fontSize: fontSize.desktop.span }}>Info@Danovin.ir</span>
+                      <img src={home} alt="خانه" className="m-1" />
+                    </div>
+                  </div>
+                  <div className="contact__map d-flex align-items-center mt-3">
+                    <Location />
+                  </div>
                 </div>
               </div>
-              <div className="contact__map d-flex align-items-center">
-                {/* <Location /> */}
-              </div>
             </div>
-          </div>
-        </div>
-        <Footer />
+            <Footer />
+          </>
+        ) : null}
       </>
     );
   }

src/views/Contact/index.scss

@@ -5,6 +5,7 @@
   padding: 0px 10px;
   direction: rtl;
   min-height: calc(100vh - 288px);
+  overflow-x: hidden;
   &__forms {
     width: 100%;
     justify-content: space-between;
@@ -149,9 +150,7 @@
       .contact__map {
         width: 100%;
         height: 430px;
-        background-color: #eee;
         border-radius: 20px;
-        background: url(../../assets/images/mapImage.png);
       }
     }
   }

src/views/Faq/Collapse/index.js

@@ -5,12 +5,12 @@ import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
+const maxMobileSize = 550;
 
 const fontSize = {
   mobile: {
-    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 27,
-    div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 30,
+    h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 28,
+    div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 34,
   },
   desktop: {
     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 85,

src/views/Faq/index.js

@@ -6,11 +6,11 @@ import Collapse from "./Collapse/index";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
-const maxMobileSize = 650;
+const maxMobileSize = 550;
 
 const fontSize = {
   mobile: {
-    h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
+    h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
     button: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 25,
     p: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 70,
     span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 75,
@@ -26,6 +26,8 @@ const fontSize = {
 };
 export default class Faq extends Component {
   state = {
+    search: "",
+    searchedMessages: null,
     messages: [
       {
         id: 0,
@@ -66,22 +68,53 @@ export default class Faq extends Component {
   };
 
   setMessageActive = (id, status) => {
-    if (status) {
-      this.setState((prevState) => ({
-        messages: prevState.messages.map((item) =>
-          item.id === id ? { ...item, active: false } : item
-        ),
-      }));
+    if (this.state.searchedMessages) {
+      if (status) {
+        this.setState((prevState) => ({
+          searchedMessages: prevState.searchedMessages.map((item) =>
+            item.id === id ? { ...item, active: false } : item
+          ),
+        }));
+      } else {
+        this.setState((prevState) => ({
+          searchedMessages: prevState.searchedMessages.map((item) =>
+            item.id === id
+              ? { ...item, active: true }
+              : { ...item, active: false }
+          ),
+        }));
+      }
     } else {
-      this.setState((prevState) => ({
-        messages: prevState.messages.map((item) =>
-          item.id === id
-            ? { ...item, active: true }
-            : { ...item, active: false }
-        ),
-      }));
+      if (status) {
+        this.setState((prevState) => ({
+          messages: prevState.messages.map((item) =>
+            item.id === id ? { ...item, active: false } : item
+          ),
+        }));
+      } else {
+        this.setState((prevState) => ({
+          messages: prevState.messages.map((item) =>
+            item.id === id
+              ? { ...item, active: true }
+              : { ...item, active: false }
+          ),
+        }));
+      }
     }
   };
+
+  handleSearch = (val) => {
+    this.setState({
+      search: "",
+    });
+    this.setState((prevState) => ({
+      searchedMessages: prevState.messages.filter(
+        (item) => item.title.search(val) !== -1
+      ),
+      search: val,
+    }));
+  };
+
   render() {
     return (
       <>
@@ -90,23 +123,39 @@ export default class Faq extends Component {
             <div className="faq d-flex flex-column align-items-center">
               <Navbar page={"faq"} />
               <header className="faq__header d-flex flex-column align-items-center">
-                <h1 style={{fontSize: fontSize.desktop.h1 }}>سلام چطوری میتونم کمکتون کنم؟</h1>
+                <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+                  سلام چطوری میتونم کمکتون کنم؟
+                </h1>
                 <div className="faq__header--search d-flex align-items-center">
                   <input
                     type="search"
                     placeholder="دنبال چه چیزی برات باشیم؟"
+                    onChange={(e) => this.handleSearch(e.target.value)}
                   />
-                  <button type="submit" style={{fontSize: fontSize.mobile.button}}>جستجو</button>
+                  <button
+                    type="submit"
+                    style={{ fontSize: fontSize.mobile.button }}
+                  >
+                    جستجو
+                  </button>
                 </div>
               </header>
               <div className="faq__list d-flex flex-column">
-                {this.state.messages.map((item, i) => (
-                  <Collapse
-                    setMessageActive={this.setMessageActive}
-                    message={item}
-                    key={i}
-                  />
-                ))}
+                {this.state.search === ""
+                  ? this.state.messages.map((item, i) => (
+                      <Collapse
+                        setMessageActive={this.setMessageActive}
+                        message={item}
+                        key={i}
+                      />
+                    ))
+                  : this.state.searchedMessages.map((item, i) => (
+                      <Collapse
+                        setMessageActive={this.setMessageActive}
+                        message={item}
+                        key={i}
+                      />
+                    ))}
               </div>
             </div>
             <Footer />
@@ -116,18 +165,32 @@ export default class Faq extends Component {
           <div className="mobile-faq d-flex flex-column align-items-center">
             <Navbar page={"mobile-faq"} />
             <header className="mobile-faq__header d-flex flex-column align-items-center">
-              <h1 style={{fontSize: fontSize.mobile.h1 }}>سلام چطوری میتونم کمکتون کنم؟</h1>
-              <input type="search" placeholder="دنبال چه چیزی برات باشیم؟" />
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>
+                سلام چطوری میتونم کمکتون کنم؟
+              </h1>
+              <input
+                type="search"
+                placeholder="دنبال چه چیزی برات باشیم؟"
+                onChange={(e) => this.handleSearch(e.target.value)}
+              />
               <button type="submit">جستجو</button>
             </header>
             <div className="mobile-faq__list d-flex flex-column">
-              {this.state.messages.map((item, i) => (
-                <Collapse
-                  setMessageActive={this.setMessageActive}
-                  message={item}
-                  key={i}
-                />
-              ))}
+              {!this.state.search
+                ? this.state.messages.map((item, i) => (
+                    <Collapse
+                      setMessageActive={this.setMessageActive}
+                      message={item}
+                      key={i}
+                    />
+                  ))
+                : this.state.searchedMessages.map((item, i) => (
+                    <Collapse
+                      setMessageActive={this.setMessageActive}
+                      message={item}
+                      key={i}
+                    />
+                  ))}
             </div>
           </div>
         ) : null}

src/views/Faq/index.scss

@@ -63,7 +63,7 @@
   padding: 0px 10px;
   direction: rtl;
   overflow-x: hidden;
-  padding-top: 60px;
+  padding-top: 80px;
   &__header {
     margin-top: 30px;
     width: 100%;
@@ -86,6 +86,7 @@
       width: 100%;
       padding: 8px 5px;
       margin: 15px 0px;
+      max-width: 400px;
       &::placeholder {
         color: #d8dce5;
         font-size: 16px;

src/views/Home/Navbar/Laptop/index.scss

@@ -5,6 +5,11 @@
   align-items: center;
   font-family: numeralLight;
   z-index: 100;
+  overflow: hidden;
+  &::-webkit-scrollbar{
+    display: none;
+    width: 0px;
+  }
   &__logo{
     // width: 100px;
     // height: 50px;

src/views/Products/Product/index.js

@@ -1,35 +1,51 @@
 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 
-import './index.scss';
+import "./index.scss";
+
+const maxMobileSize = 550;
+
+const fontSize = {
+  mobile : {
+    h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26,
+    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34,
+    div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32,
+  }
+}
 export default class Product extends Component {
   render() {
     const { product } = this.props;
     return (
-      <article className="mobile-products-product d-flex flex-column">
-        <Link to={`/products/${product.id}`}>
-          <img src={product.image} alt={product.title} />
-          <h1>{product.title}</h1>
-          <h2>{product.subTitle}</h2>
-          {product.price ? (
-            <div className="mobile-products-product__price d-flex justify-content-center">
-              {product.oldPrice ? (
-                <div>
-                  <div className="mobile-products-product__price--old d-flex">
-                    {product.oldPrice} تومان
-                    <span></span>
+      <>
+        {window.innerWidth < 1000 ? (
+          <article className="mobile-products-product d-flex flex-column">
+            <Link to={`/products/${product.id}`}>
+              <img src={product.image} alt={product.title} />
+              <h1 style={{ fontSize: fontSize.mobile.h1 }}>{product.title}</h1>
+              <h2 style={{ fontSize: fontSize.mobile.h2 }}>{product.subTitle}</h2>
+              {product.price ? (
+                <div className="mobile-products-product__price d-flex flex-column align-items-center">
+                  {product.oldPrice ? (
+                    <div>
+                      <div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__price--old d-flex">
+                        {product.oldPrice} تومان
+                        <span></span>
+                      </div>
+                    </div>
+                  ) : null}
+                  <div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__price--price">
+                    {product.price} تومان
                   </div>
                 </div>
-              ) : null}
-              <div className="mobile-products-product__price--price">
-                {product.price} تومان
-              </div>
-            </div>
-          ) : (
-            <div className="mobile-products-product__notAvailabe">ناموجود</div>
-          )}
-        </Link>
-      </article>
+              ) : (
+                <div style={{ fontSize: fontSize.mobile.div }} className="mobile-products-product__notAvailabe">
+                  ناموجود
+                </div>
+              )}
+            </Link>
+          </article>
+        ) : null}
+      </>
     );
   }
 }

src/views/Products/Product/index.scss

@@ -15,27 +15,24 @@
     h1{
       font-family: numeralBold;
       margin-top: 15px;
-      font-size: calc(100vw / 26);
       color: #7dc241;
       letter-spacing: -1px;
     }
     h2{
       font-family: numeralLight;
       margin-top: 10px;
-      font-size: calc(100vw / 32);
       color: #6f7074;
+      letter-spacing: -1px;
     }
   }
   &__notAvailabe{
     font-family: numeralBold;
-    font-size: calc(100vw / 46);
     width : 100%;
     text-align: center;
     color: #6f7074;
     margin-top: 15px;
   }
   &__price{
-    font-size: calc(100vw / 46);
     width : 100%;
     margin-top: 15px;
     text-align: center;
@@ -45,7 +42,6 @@
       position: relative;
       margin-left: 10px;
       align-items:center;
-      font-size: calc(100vw / 46);
       span{
         position: absolute;
         left: 0px;
@@ -58,7 +54,6 @@
     &--price{
       color: #02733c;
       font-family: numeralBold;
-      font-size: calc(100vw / 46);
     }
   }
 }

src/views/Products/index.js

@@ -12,6 +12,7 @@ import book3 from "../../assets/images/book3.png";
 import book4 from "../../assets/images/book4.png";
 import book5 from "../../assets/images/book5.png";
 
+
 import "./index.scss";
 export default class Products extends Component {
   state = {

src/views/QR/Links/index.js

@@ -6,13 +6,13 @@ export default function Links(props){
         <>
             {
                 window.innerWidth > 1000 ? 
-                <div className="links-box d-flex flex-column"> 
+                <div className="links-box d-flex flex-column" id="links">
                     <h2>{props.data.title}</h2>
                 </div> : null
             }
             {
                 window.innerWidth < 1000 ? 
-                <div className="mobile-links-box d-flex flex-column"> 
+                <div className="mobile-links-box d-flex flex-column" id="links"> 
                     <h2><span></span>لینکها</h2>
                     <ul>
                         {props.data.links.map((item,i) => (

src/views/QR/SubjectsDropdown/index.js

@@ -18,6 +18,14 @@ const fontSize = {
 
 export default function Dropdown(props) {
   const [dropdown, setDropdown] = useState(false);
+  const [searchedSubjects, setSearchedSubjects] = useState(null);
+  const [search, setSearch] = useState("");
+
+  const handleSearch = (val) => {
+    let fakeList = props.subjects.filter((item) => item.name.search(val) !== -1);
+    setSearchedSubjects(fakeList);
+    setSearch(val);
+  };
   return (
     <div className="subjects-dropdown d-flex flex-column mt-3">
       <div
@@ -42,13 +50,13 @@ export default function Dropdown(props) {
       {dropdown ? (
         <>
           <div className="subjects-dropdown__search d-flex">
-            <input type="search" style={{ fontSize: fontSize.desktop.input }} />
+            <input type="search" style={{ fontSize: fontSize.desktop.input }} onChange={(e) => handleSearch(e.target.value)} />
             <img src={navbarSearch} alt="جستجو" />
           </div>
           <ul>
-            {props.subjects.map((item, i) => (
-              <Item data={item} key={i} />
-            ))}
+            {search
+              ? searchedSubjects.map((item, i) => <Item data={item} key={i} />)
+              : props.subjects.map((item, i) => <Item data={item} key={i} />)}
           </ul>
         </>
       ) : null}
@@ -66,7 +74,5 @@ Dropdown.defaultProps = {
 };
 
 const Item = (props) => {
-  return (
-      <li style={{fontSize : fontSize.desktop.li }}>{props.data.name}</li>
-  );
+  return <li style={{ fontSize: fontSize.desktop.li }}>{props.data.name}</li>;
 };

src/views/QR/VideoBox/index.js

@@ -2,14 +2,6 @@ import React from 'react';
 
 import './index.scss';
 
-const maxDesktopSize = 1250;
-
-const fontSize = {
-  desktop: {
-    h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
-  },
-};
-
 
 export default function VideoBox(props){
     return(
@@ -17,7 +9,7 @@ export default function VideoBox(props){
             {
                 window.innerWidth > 1000 ? 
                 <div className="video-box d-flex flex-column" id="video"> 
-                    <h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center"><span></span>{props.data.title}</h2>
+                    <h2 style={{fontSize: props.fontSize.desktop.content.h2 }} className="d-flex align-items-center"><span></span>{props.data.title}</h2>
                     <div></div>
                 </div> : null
             }

src/views/QR/VoiceBox/index.js

@@ -1,32 +1,31 @@
-import React from 'react';
+import React from "react";
 
-import './index.scss';
+import "./index.scss";
 
-const maxDesktopSize = 1250;
-
-const fontSize = {
-  desktop: {
-    h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
-  },
-};
-
-export default function VoiceBox(props){
-    return(
-        <>
-            {
-                window.innerWidth > 1000 ? 
-                <div id="voice" className="voice-box d-flex flex-column"> 
-                    <h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center"><span></span>{props.data.title}</h2>
-                    <div></div>
-                </div> : null
-            }
-            {
-                window.innerWidth < 1000 ? 
-                <div className="mobile-voice-box d-flex flex-column" id="voice"> 
-                    <h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
-                    <div></div>
-                </div> : null
-            }   
-        </>
-    );
-}
+export default function VoiceBox(props) {
+  return (
+    <>
+      {window.innerWidth > 1000 ? (
+        <div id="voice" className="voice-box d-flex flex-column">
+          <h2
+            style={{ fontSize: props.fontSize.desktop.content.h2 }}
+            className="d-flex align-items-center"
+          >
+            <span></span>
+            {props.data.title}
+          </h2>
+          <div></div>
+        </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <div className="mobile-voice-box d-flex flex-column" id="voice">
+          <h2 className="d-flex align-items-center">
+            <span></span>
+            {props.data.title}
+          </h2>
+          <div></div>
+        </div>
+      ) : null}
+    </>
+  );
+}

src/views/QR/index.js

@@ -3,76 +3,140 @@ import Navbar from "../Home/Navbar/index";
 import Footer from "../Home/Footer/index";
 import VoiceBox from "./VoiceBox/index.js";
 import VideoBox from "./VideoBox/index";
-import PDF from './PDF/index';
-import PowerPoint from './PowerPoint/index';
-import Links from './Links/index';
-import SubjectsDropdown from './SubjectsDropdown/index';
-import BookContent from './BookContent/index';
+import PDF from "./PDF/index";
+import PowerPoint from "./PowerPoint/index";
+import Links from "./Links/index";
+import SubjectsDropdown from "./SubjectsDropdown/index";
+import BookContent from "./BookContent/index";
+import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined";
 
-import exit from '../../assets/icons/exit.svg';
+import exit from "../../assets/icons/exit.svg";
 import book2 from "../../assets/images/book2.png";
 
-import './index.scss';
+import "./index.scss";
 
 const maxDesktopSize = 1250;
 
-const fontSize = {
-  desktop: {
-    sidebar: {
-      h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
-      h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
-      div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
-    }, 
-    content: {
-      h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
-      p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 110,
-    }
-  },
-};
-
 export default class QR extends Component {
+  state = {
+    theme: true,
+    zoom: [10, 10],
+  };
+
+  handleZoom = (type) => {
+    if (type === "increase") {
+      this.setState((prevState) => ({
+        zoom:
+          prevState.zoom[0] === 18
+            ? prevState.zoom
+            : [prevState.zoom[0] + 2, prevState.zoom[1] - 2],
+      }));
+    } else {
+      this.setState((prevState) => ({
+        zoom:
+          prevState.zoom[0] === 6
+            ? prevState.zoom
+            : [prevState.zoom[0] - 2, prevState.zoom[1] + 2],
+      }));
+    }
+  };
   render() {
     const { QR } = this.props;
+    const fontSize = {
+      desktop: {
+        sidebar: {
+          h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
+          h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
+          div:
+            window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
+        },
+        content: {
+          h1:
+            window.innerWidth > maxDesktopSize
+              ? this.state.zoom[0] * 2
+              : window.innerWidth / (this.state.zoom[1] * 7),
+          p:
+            window.innerWidth > maxDesktopSize
+              ? this.state.zoom[0] * 1.4
+              : window.innerWidth / (this.state.zoom[1] * 12),
+          h2:
+            window.innerWidth > maxDesktopSize
+              ? this.state.zoom[0] * 1.2
+              : (window.innerWidth / this.state.zoom[1]) * 12,
+        },
+      },
+    };
     return (
       <>
         {window.innerWidth > 1000 ? (
           <>
-            <div className="qr d-flex flex-column">
+            <div
+              className="qr d-flex flex-column"
+            >
               <Navbar />
               <div className="d-flex">
-                <section className="qr__sidebar d-flex flex-column">
+                <section
+                  className="qr__sidebar d-flex flex-column p-2"
+                >
                   <header className="qr__sidebar--header d-flex">
                     <div className="qr__sidebar--header__right d-flex">
                       <img src={QR.image} alt={QR.title} />
                     </div>
                     <div className="qr__sidebar--header__left d-flex flex-column">
-                      <h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>{QR.title}</h1>
-                      <h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>{QR.subTitle}</h2>
+                      <h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>
+                        {QR.title}
+                      </h1>
+                      <h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>
+                        {QR.subTitle}
+                      </h2>
                       <div style={{ fontSize: fontSize.desktop.sidebar.div }}>
-                        شما در حال مطالعه  <strong>صفحه {QR.sample.page}</strong> هستید. 
+                        شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong>{" "}
+                        هستید.
                       </div>
                       <div style={{ fontSize: fontSize.desktop.sidebar.div }}>
-                        پیشرفت شما در مطالعه کتاب به <span>{QR.sample.percent} درصد</span>  رسیده است.
+                        پیشرفت شما در مطالعه کتاب به{" "}
+                        <span>{QR.sample.percent} درصد</span> رسیده است.
                       </div>
                     </div>
                   </header>
                   <SubjectsDropdown />
                   <BookContent data={QR.data} />
                 </section>
-                <section className="qr__content d-flex flex-column">
+                <section
+                  className="qr__content d-flex flex-column"
+                >
                   <header className="qr__content--header d-flex justify-content-end">
                     <div className="qr__content--header__tools d-flex">
-                      <span className="d-flex justify-content-center align-items-center">+</span>
-                      <span className="d-flex justify-content-center align-items-center">+</span>
-                      <span className="d-flex justify-content-center align-items-center">+</span>
-                      <span className="d-flex justify-content-center align-items-center">+</span>
+                      <span
+                        className="d-flex justify-content-center align-items-center"
+                        onClick={() =>
+                          this.setState({ theme: !this.state.theme })
+                        }
+                      >
+                        <NightsStayOutlinedIcon
+                          style={{
+                            fontSize: 20,
+                            color: this.state.theme ? "#7dc241" : "white",
+                          }}
+                        />
+                      </span>
+                      <span
+                        className="d-flex justify-content-center align-items-center"
+                        onClick={() => this.handleZoom("increase")}
+                      >
+                        +
+                      </span>
+                      <span
+                        className="d-flex justify-content-center align-items-center"
+                        onClick={() => this.handleZoom("decrease")}
+                      >
+                        -
+                      </span>
                     </div>
                   </header>
-                  {
-                    QR.data.map((item, i) => (
-                      <Identifier data={item} key={i} />
-                    ))
-                  }
+                  {QR.data.map((item, i) => (
+                    <Identifier fontSize={fontSize} data={item} key={i} />
+                  ))}
                 </section>
               </div>
             </div>
@@ -83,17 +147,21 @@ export default class QR extends Component {
           <>
             <div className="mobile-qr d-flex flex-column">
               <Navbar />
-              
-              <div className="d-flex pt-3">
-                <div className="mobile-qr__buttons d-flex flex-column">
 
+              <div className="d-flex pt-3">
+                <div className="mobile-qr__buttons d-flex flex-column align-items-center">
+                  <img src={exit} alt='خروج' />
+                  <button>نمایش تمامی محتواها</button>
+                  <a href="#voice" className="mobile-qr__buttons--voice mobile-qr__buttons--media"></a>
+                  <a href="#video" className="mobile-qr__buttons--video mobile-qr__buttons--media"></a>
+                  <a href="#ppt" className="mobile-qr__buttons--ppt mobile-qr__buttons--media"></a>
+                  <a href="#pdf" className="mobile-qr__buttons--pdf mobile-qr__buttons--media"></a>
+                  <a href="#links" className="mobile-qr__buttons--attachment mobile-qr__buttons--media"></a>
                 </div>
                 <div className="mobile-qr__content d-flex flex-column">
-                  {
-                    QR.data.map((item, i) => (
-                      <Identifier data={item} key={i} />
-                    ))
-                  }
+                  {QR.data.map((item, i) => (
+                    <Identifier data={item} key={i} />
+                  ))}
                 </div>
               </div>
             </div>
@@ -114,109 +182,109 @@ QR.defaultProps = {
     sample: {
       page: 67,
       percent: 60,
-
     },
     data: [
       {
-        type: 'h1',
-        text: 'خلاصه کتاب'
+        type: "h1",
+        text: "خلاصه کتاب",
       },
       {
-        type: 'p',
-        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+        type: "p",
+        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
       },
       {
-        type: 'h1',
-        text: 'خلاصه کتاب'
+        type: "h1",
+        text: "خلاصه کتاب",
       },
       {
-        type: 'p',
-        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+        type: "p",
+        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
       },
       {
-        type: 'voice',
-        title: 'استاد رضایی:‌توضیح در مورد درس آتشفشان',
+        type: "voice",
+        title: "استاد رضایی:‌توضیح در مورد درس آتشفشان",
         file: null,
       },
       {
-        type: 'p',
-        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+        type: "p",
+        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
       },
       {
-        type: 'video',
-        title: 'ویدئوی آزمایشی آتش فشان سرکه',
-        file: null
+        type: "video",
+        title: "ویدئوی آزمایشی آتش فشان سرکه",
+        file: null,
       },
       {
-        type: 'p',
-        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+        type: "p",
+        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
       },
       {
-        type: 'ppt',
-        title: 'فایل پاورپوینت ارائه درس آتشفشان',
-        link: ''
+        type: "ppt",
+        title: "فایل پاورپوینت ارائه درس آتشفشان",
+        link: "",
       },
       {
-        type: 'pdf',
-        title: 'فایل پی دی اف ارائه درس آتشفشان',
-        link: ''
+        type: "pdf",
+        title: "فایل پی دی اف ارائه درس آتشفشان",
+        link: "",
       },
       {
-        type: 'p',
-        text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
+        type: "p",
+        text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت",
       },
       {
-        type: 'links',
+        type: "links",
         links: [
           {
-            title: 'وبسایت آموزشی دانوین',
-            link: '',
+            title: "وبسایت آموزشی دانوین",
+            link: "",
           },
           {
-            title: 'وبسایت رسمی مدیریت راهبردی کشور',
-            link: ''
+            title: "وبسایت رسمی مدیریت راهبردی کشور",
+            link: "",
           },
           {
-            title: 'سازمان تبلیغات صنایع سبک',
-            link: ''
-          }
-        ]
-      }
-    ]
+            title: "سازمان تبلیغات صنایع سبک",
+            link: "",
+          },
+        ],
+      },
+    ],
   },
 };
 
 const Identifier = (props) => {
-  return(
+  return (
     <>
-      {
-        props.data.type === 'p' ? 
-        <p style={{fontSize: window.innerWidth > 1250 ? fontSize.desktop.content.p : ''}}>{props.data.text}</p> : null
-      }
-      {
-        props.data.type === 'h1' ? 
-        <h1 style={{fontSize: window.innerWidth > 1250 ? fontSize.desktop.content.h1 : ''}}>{props.data.text}</h1> : null
-      }
-      {
-        props.data.type === 'voice'?
-        <VoiceBox data={props.data} /> : null
-      }
-      {
-        props.data.type === 'video'?
-        <VideoBox data={props.data} /> : null
-      }
-      {
-        props.data.type === 'pdf'?
-        <PDF data={props.data} /> : null
-      }
-      {
-        props.data.type === 'ppt'?
-        <PowerPoint data={props.data} /> : null
-      }
-      {
-        props.data.type === 'links'?
-        <Links data={props.data} /> : null
-      }
+      {props.data.type === "p" ? (
+        <p
+          style={{
+            fontSize:
+              window.innerWidth > 1250 ? props.fontSize.desktop.content.p : "",
+          }}
+        >
+          {props.data.text}
+        </p>
+      ) : null}
+      {props.data.type === "h1" ? (
+        <h1
+          style={{
+            fontSize:
+              window.innerWidth > 1250 ? props.fontSize.desktop.content.h1 : "",
+          }}
+        >
+          {props.data.text}
+        </h1>
+      ) : null}
+      {props.data.type === "voice" ? (
+        <VoiceBox fontSize={props.fontSize} data={props.data} />
+      ) : null}
+      {props.data.type === "video" ? (
+        <VideoBox fontSize={props.fontSize} data={props.data} />
+      ) : null}
+      {props.data.type === "pdf" ? <PDF data={props.data} /> : null}
+      {props.data.type === "ppt" ? <PowerPoint data={props.data} /> : null}
+      {props.data.type === "links" ? <Links data={props.data} /> : null}
     </>
   );
-}
+};

src/views/QR/index.scss

@@ -47,11 +47,62 @@
     }
   }
   &__buttons {
-    width: 35px;
-    background-color: #eee;
+    width: 40px;
+    padding-top: 10px 0px;
+    text-align: center;
+    overflow-x: hidden;
+    height: 100vh;
+    position: fixed;
+    top: 100px;
+    right: 0px;
+    &--media{
+      width: 100%;
+      height: 50px;
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+      transform: translateY(120px);
+      margin-top: 10px;
+    }
+    &--voice{
+      background: url(../../assets/icons/play.svg) no-repeat #A2FFC1;
+      background-size: 21px;
+      background-position: center center;
+    }
+    &--video{
+      background: url(../../assets/icons/video-player.svg) no-repeat #88A7FF;
+      background-size: 21px;
+      background-position: center center;
+    }
+    &--ppt{
+      background: url(../../assets/icons/ppt.svg) no-repeat #BCFFEF;
+      background-size: 21px;
+      background-position: center center;
+    }
+    &--pdf{
+      background: url(../../assets/icons/pdf.svg) no-repeat #FFA9A9;
+      background-size: 21px;
+      background-position: center center;
+    }
+    &--attachment{
+      background: url(../../assets/icons/attachment.svg) no-repeat #FBFF7C;
+      background-size: 21px;
+      background-position: center center;
+    }
+    & button{
+      font-family: numeralLight;
+      color: #82791E;
+      background-color: #FCFFA2;
+      border: 0px;
+      padding: 10px 10px;
+      font-size: 14px;
+      letter-spacing: -1px;
+      width: 140px;
+      transform: rotate(-90deg) translateX(-65px);
+    }
   }
   &__content {
-    width: calc(100% - 35px);
+    margin-right: 40px;
+    width: calc(100% - 40px);
     padding: 0px 10px;
     h1 {
       font-family: numeralBold;
@@ -117,10 +168,10 @@
   }
   .qr__content {
     flex: 3;
-    background-color: #fafafa;
     border-radius: 10px;
     margin-right: 20px;
     padding: 10px;
+    background-color: rgb(247, 247, 247);
     &--header {
       width: 100%;
       padding: 10px;
@@ -128,12 +179,15 @@
         padding: 8px;
         background-color: #eee;
         border-radius: 10px;
-        width: 160px;
+        width: 130px;
         justify-content: space-between;
         span {
+           cursor: pointer;
           width: 30px;
           height: 30px;
           background-color: #ddd;
+          color: #7dc241;
+          font-size: 20px;
         }
       }
     }

yarn.lock

@@ -1494,6 +1494,104 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@mapbox/extent@0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/extent/-/extent-0.4.0.tgz#3e591f32e1f0c3981c864239f7b0ac06e610f8a9"
+  integrity sha1-PlkfMuHww5gchkI597CsBuYQ+Kk=
+
+"@mapbox/geojson-area@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz#18d7814aa36bf23fbbcc379f8e26a22927debf10"
+  integrity sha1-GNeBSqNr8j+7zDefjiaiKSfevxA=
+  dependencies:
+    wgs84 "0.0.0"
+
+"@mapbox/geojson-coords@0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-coords/-/geojson-coords-0.0.1.tgz#31338ac5bc7b2e663409fb129643257ce715594f"
+  integrity sha512-cdMlqmDl1vzAl2E0XC2zIuqM74vdet0Dq2el49haJEVbGpC8se40j5UcsnBK/gsvZzrume30fon1u/aSYMXG4Q==
+  dependencies:
+    "@mapbox/geojson-normalize" "0.0.1"
+    geojson-flatten "^1.0.4"
+
+"@mapbox/geojson-extent@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-extent/-/geojson-extent-1.0.0.tgz#cc1db1ca5f28e7a3a2d71dcfc86c9ef3486e1558"
+  integrity sha512-OWW/Tw7OkKHoogXjQJNILjLd2d4JZzO/elc5Qr08VNwFSIPpSnJgyaEGO2xRPqNuWDLr4RocuqmC0FcQWPgeOA==
+  dependencies:
+    "@mapbox/extent" "0.4.0"
+    "@mapbox/geojson-coords" "0.0.1"
+    rw "~0.1.4"
+    traverse "~0.6.6"
+
+"@mapbox/geojson-normalize@0.0.1", "@mapbox/geojson-normalize@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-normalize/-/geojson-normalize-0.0.1.tgz#1da1e6b3a7add3ad29909b30f438f60581b7cd80"
+  integrity sha1-HaHms6et060pkJsw9Dj2BYG3zYA=
+
+"@mapbox/geojson-rewind@^0.5.0":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.5.1.tgz#adbe16dc683eb40e90934c51a5e28c7bbf44f4e1"
+  integrity sha512-eL7fMmfTBKjrb+VFHXCGv9Ot0zc3C0U+CwXo1IrP+EPwDczLoXv34Tgq3y+2mPSFNVUXgU42ILWJTC7145KPTA==
+  dependencies:
+    get-stream "^6.0.1"
+    minimist "^1.2.5"
+
+"@mapbox/geojson-types@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz#9aecf642cb00eab1080a57c4f949a65b4a5846d6"
+  integrity sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==
+
+"@mapbox/jsonlint-lines-primitives@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
+  integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=
+
+"@mapbox/mapbox-gl-draw@^1.1.2":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-draw/-/mapbox-gl-draw-1.3.0.tgz#7a30fb99488cb47a32c25e99c3c62413b04bbaed"
+  integrity sha512-B+KWK+dAgzLHMNyKVuuMRfjeSlQ77MhNLdfpQQpbp3pkhnrdmydDe3ixto1Ua78hktNut0WTrAaD8gYu4PVcjA==
+  dependencies:
+    "@mapbox/geojson-area" "^0.2.2"
+    "@mapbox/geojson-extent" "^1.0.0"
+    "@mapbox/geojson-normalize" "^0.0.1"
+    "@mapbox/point-geometry" "^0.1.0"
+    hat "0.0.3"
+    lodash.isequal "^4.5.0"
+    xtend "^4.0.2"
+
+"@mapbox/mapbox-gl-supported@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz#f60b6a55a5d8e5ee908347d2ce4250b15103dc8e"
+  integrity sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==
+
+"@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
+  integrity sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=
+
+"@mapbox/tiny-sdf@^1.1.1":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz#424c620a96442b20402552be70a7f62a8407cc59"
+  integrity sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw==
+
+"@mapbox/unitbezier@^0.0.0":
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz#15651bd553a67b8581fb398810c98ad86a34524e"
+  integrity sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=
+
+"@mapbox/vector-tile@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz#d3a74c90402d06e89ec66de49ec817ff53409666"
+  integrity sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==
+  dependencies:
+    "@mapbox/point-geometry" "~0.1.0"
+
+"@mapbox/whoots-js@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
+  integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
+
 "@material-ui/core@^4.11.4":
   version "4.11.4"
   resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4"
@@ -1808,6 +1906,23 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@turf/bbox@4.7.3":
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-4.7.3.tgz#e3ad4f10a7e9b41b522880d33083198199059067"
+  integrity sha1-461PEKfptBtSKIDTMIMZgZkFkGc=
+  dependencies:
+    "@turf/meta" "^4.7.3"
+
+"@turf/helpers@4.7.3":
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-4.7.3.tgz#bc312ac43cab3c532a483151c4c382c5649429e9"
+  integrity sha1-vDEqxDyrPFMqSDFRxMOCxWSUKek=
+
+"@turf/meta@^4.7.3":
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-4.7.4.tgz#6de2f1e9890b8f64b669e4b47c09b20893063977"
+  integrity sha1-beLx6YkLj2S2aeS0fAmyCJMGOXc=
+
 "@types/aria-query@^4.2.0":
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
@@ -1864,6 +1979,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/geojson@*":
+  version "7946.0.8"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
+  integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@@ -2012,6 +2132,13 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/supercluster@^5.0.1":
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/@types/supercluster/-/supercluster-5.0.3.tgz#aa03a77c6545265e63b50fa267ab12afe0c27658"
+  integrity sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.7.tgz#545158342f949e8fd3bfd813224971ecddc3fac4"
@@ -2723,6 +2850,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.2.tgz#0c987d82c8b82b4b9b7a945f1b5ef0d8fed586ed"
   integrity sha512-OKRkKM4ojMEZRJ5UNJHmq9tht7cEnRnqKG6KyB/trYws00Xtkv12mHtlJ0SK7cmuNbrU8dPUova3ELTuilfBbw==
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 axios@^0.21.1:
   version "0.21.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
@@ -4066,6 +4200,11 @@ css@^3.0.0:
     source-map "^0.6.1"
     source-map-resolve "^0.6.0"
 
+csscolorparser@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/csscolorparser/-/csscolorparser-1.0.3.tgz#b34f391eea4da8f3e98231e2ccd8df9c041f171b"
+  integrity sha1-s085HupNqPPpgjHizNjfnAQfFxs=
+
 cssdb@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
@@ -4224,6 +4363,13 @@ debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1:
   dependencies:
     ms "2.1.2"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.1.1, debug@^3.2.6, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -4251,6 +4397,11 @@ dedent@^0.7.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
+deep-equal@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  integrity sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=
+
 deep-equal@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
@@ -4542,6 +4693,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
+earcut@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.2.2.tgz#41b0bc35f63e0fe80da7cddff28511e7e2e80d11"
+  integrity sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ==
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -5359,6 +5515,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0, follow-redirects@^1.10.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
@@ -5494,6 +5657,19 @@ gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+geojson-flatten@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/geojson-flatten/-/geojson-flatten-1.0.4.tgz#cdfef2e9042996fcaa14fe658db6d88c99c20930"
+  integrity sha512-PpscUXxO6dvvhZxtwuqiI5v+1C/IQYPJRMWoQeaF2oohJgfGYSHKVAe8L+yUqF34PH/hmq9JlwmO+juPw+95/Q==
+  dependencies:
+    get-stdin "^7.0.0"
+    minimist "^1.2.5"
+
+geojson-vt@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
+  integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==
+
 get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
@@ -5518,6 +5694,11 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
+get-stdin@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-7.0.0.tgz#8d5de98f15171a125c5e516643c7a6d0ea8a96f6"
+  integrity sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==
+
 get-stream@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
@@ -5532,11 +5713,21 @@ get-stream@^5.0.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
+gl-matrix@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.3.0.tgz#232eef60b1c8b30a28cbbe75b2caf6c48fd6358b"
+  integrity sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -5632,6 +5823,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+grid-index@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
+  integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -5730,6 +5926,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+hat@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/hat/-/hat-0.0.3.tgz#bb014a9e64b3788aed8005917413d4ff3d502d8a"
+  integrity sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo=
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -5974,7 +6175,7 @@ identity-obj-proxy@3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-ieee754@^1.1.4:
+ieee754@^1.1.12, ieee754@^1.1.4:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
@@ -7206,6 +7407,11 @@ jss@10.6.0, jss@^10.5.1:
     array-includes "^3.1.2"
     object.assign "^4.1.2"
 
+kdbush@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
+  integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==
+
 keycode@^2.1.7:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
@@ -7381,6 +7587,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7500,6 +7711,46 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+mapbox-gl@^1.9.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-1.13.1.tgz#322efe75ab4c764fc4c776da1506aad58d5a5b9d"
+  integrity sha512-GSyubcoSF5MyaP8z+DasLu5v7KmDK2pp4S5+VQ5WdVQUOaAqQY4jwl4JpcdNho3uWm2bIKs7x1l7q3ynGmW60g==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.0"
+    "@mapbox/geojson-types" "^1.0.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/mapbox-gl-supported" "^1.5.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^1.1.1"
+    "@mapbox/unitbezier" "^0.0.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    csscolorparser "~1.0.3"
+    earcut "^2.2.2"
+    geojson-vt "^3.2.1"
+    gl-matrix "^3.2.1"
+    grid-index "^1.1.0"
+    minimist "^1.2.5"
+    murmurhash-js "^1.0.0"
+    pbf "^3.2.1"
+    potpack "^1.0.1"
+    quickselect "^2.0.0"
+    rw "^1.3.3"
+    supercluster "^7.1.0"
+    tinyqueue "^2.0.3"
+    vt-pbf "^3.1.1"
+
+mapir-react-component@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/mapir-react-component/-/mapir-react-component-1.8.1.tgz#0961307ef3c3b28e100d74dbaf333e25c22ec35e"
+  integrity sha512-i4KP019kPxlxVnI/QtyrxwY5O3sLFA0HElUI26EkHD+2Vr0u7TyZZR7K37PmHqnBeJY20hSYVyz1uFU76ISoLw==
+  dependencies:
+    "@mapbox/mapbox-gl-draw" "^1.1.2"
+    axios "^0.19.2"
+    mapbox-gl "^1.9.1"
+    react-mapbox-gl "^4.6.0"
+    react-mapbox-gl-draw "^2.0.3"
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -7799,6 +8050,11 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
+murmurhash-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
+  integrity sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=
+
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -8431,6 +8687,14 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pbf@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.1.tgz#b4c1b9e72af966cd82c6531691115cc0409ffe2a"
+  integrity sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==
+  dependencies:
+    ieee754 "^1.1.12"
+    resolve-protobuf-schema "^2.1.0"
+
 pbkdf2@^3.0.3:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
@@ -9214,6 +9478,11 @@ postcss@^8.1.0:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
+potpack@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/potpack/-/potpack-1.0.1.tgz#d1b1afd89e4c8f7762865ec30bd112ab767e2ebf"
+  integrity sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -9309,6 +9578,11 @@ prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.2,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+protocol-buffers-schema@^3.3.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.5.1.tgz#8388e768d383ac8cbea23e1280dfadb79f4122ad"
+  integrity sha512-YVCvdhxWNDP8/nJDyXLuM+UFsuPk4+1PB7WGPVDzm3HTHbzFLxQYeW2iZpS4mmnXrQJGBzt230t/BbEb7PrQaw==
+
 proxy-addr@~2.0.5:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -9422,6 +9696,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quickselect@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018"
+  integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
+
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -9556,6 +9835,22 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-mapbox-gl-draw@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-mapbox-gl-draw/-/react-mapbox-gl-draw-2.0.4.tgz#476d70a6efc07c329fa61c11022bcdab60ac4b91"
+  integrity sha512-oaBdIlyu+g7PhLUvwnCsl/wvu+5tGB9I3RLjcrYLt6U1sUMzQJqplKtVxXRv9TZqRdNaAU5qNOP+dRs55QKjsA==
+
+react-mapbox-gl@^4.6.0:
+  version "4.8.6"
+  resolved "https://registry.yarnpkg.com/react-mapbox-gl/-/react-mapbox-gl-4.8.6.tgz#c3841bac882a297f60efce50cac4060e3a1c3f81"
+  integrity sha512-e6rJ4GFye2AIu10I0a0OfleIWYkigIMIysoSKCA4Wg5YHa52JRHq2F3x0c0cnhqfz1txnUhXUbkx2qqs8B6kKQ==
+  dependencies:
+    "@turf/bbox" "4.7.3"
+    "@turf/helpers" "4.7.3"
+    "@types/supercluster" "^5.0.1"
+    deep-equal "1.0.1"
+    supercluster "^7.0.0"
+
 react-only-when@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-only-when/-/react-only-when-1.0.2.tgz#a8a79b48dd6cfbd91ddc710674a94153e88039d3"
@@ -10044,6 +10339,13 @@ resolve-pathname@^3.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
   integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
 
+resolve-protobuf-schema@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
+
 resolve-url-loader@^3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.3.tgz#49ec68340f67d8d2ab6b401948d5def3ab2d0367"
@@ -10216,6 +10518,16 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rw@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
+
+rw@~0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-0.1.4.tgz#4903cbd80248ae0ede685bf58fd236a7a9b29a3e"
+  integrity sha1-SQPL2AJIrg7eaFv1j9I2p6mymj4=
+
 rxjs@^6.6.0:
   version "6.6.7"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
@@ -10987,6 +11299,13 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+supercluster@^7.0.0, supercluster@^7.1.0:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-7.1.3.tgz#8c5412c7d7e53b010f7514e87f279544babc3425"
+  integrity sha512-7+bR4FbF5SYsmkHfDp61QiwCKtwNDyPsddk9TzfsDA5DQr5Goii5CVD2SXjglweFCxjrzVZf945ahqYfUIk8UA==
+  dependencies:
+    kdbush "^3.0.0"
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -11208,6 +11527,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tinyqueue@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
+  integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -11283,6 +11607,11 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
+traverse@~0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
+  integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
+
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
@@ -11652,6 +11981,15 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vt-pbf@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.3.tgz#68fd150756465e2edae1cc5c048e063916dcfaac"
+  integrity sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==
+  dependencies:
+    "@mapbox/point-geometry" "0.1.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    pbf "^3.2.1"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -11839,6 +12177,11 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
+wgs84@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/wgs84/-/wgs84-0.0.0.tgz#34fdc555917b6e57cf2a282ed043710c049cdc76"
+  integrity sha1-NP3FVZF7blfPKigu0ENxDASc3HY=
+
 whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
@@ -12122,7 +12465,7 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==