feat: initialise routes page

src/locales/en/en.json

@@ -6,6 +6,7 @@
     "denied": "Denied",
     "loading": "Loading...",
     "selectDates": "Select dates",
+    "selectTime": "Select time",
     "selectAppAndDates": "Select App & Dates",
     "from": "From",
     "to": "To",

src/locales/ru/ru.json

@@ -6,6 +6,7 @@
     "denied": "Выкл",
     "loading": "Загрузка...",
     "selectDates": "Выбрать даты",
+    "selectTime": "Выбрать время",
     "selectAppAndDates": "Выбрать приложение и даты",
     "from": "От",
     "to": "До",

src/pages/Routes/Routes.css

@@ -30,10 +30,11 @@
     font-weight: bold;
 }
 
-.routes__filter__dates {
+.routes__filter__date {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 0.5rem 0;
 }
 
 .routes__filter__date label {

src/pages/Routes/Routes.tsx

@@ -2,39 +2,47 @@ import React from "react";
 import "./Routes.css";
 import SectionHeader from "../../layouts/SectionHeader";
 import CButton from "../../components/CButton";
-import { MdInfoOutline } from "react-icons/md";
+import { useTranslation } from "react-i18next";
+import GoogleMapReact from "google-map-react";
 
 const Routes: React.FC = () => {
+  const { t } = useTranslation();
+
   return (
     <div className="routes wrapper">
       <SectionHeader to="/home" />
 
       <div className="routes__content">
-        <div>
-          <div className="routes__content__header">
-            <h3>Routes</h3>
-            <MdInfoOutline className="routes__content__header__icon" />
-          </div>
-
-          <p className="routes__content__empty">No data</p>
+        <div style={{ height: "67vh", width: "100%" }}>
+          <GoogleMapReact
+            defaultCenter={{ lat: 40.7128, lng: -74.006 }}
+            defaultZoom={12}
+            options={{ disableDefaultUI: true }}
+          ></GoogleMapReact>
         </div>
 
         <div className="routes__filter">
-          <p className="routes__filter__title">Select Dates</p>
+          <p className="routes__filter__title">{t("common.selectTime")}</p>
 
           <div className="routes__filter__dates">
             <div className="routes__filter__date">
-              <label htmlFor="from">From</label>
-              <input type="date" id="from" />
+              <label htmlFor="from">{t("common.from")}</label>
+              <div>
+                <input type="date" id="from" />
+                <input type="time" id="from-time" />
+              </div>
             </div>
 
             <div className="routes__filter__date">
-              <label htmlFor="to">To</label>
-              <input type="date" id="to" />
+              <label htmlFor="to">{t("common.to")}</label>
+              <div>
+                <input type="date" id="to" />
+                <input type="time" id="to-time" />
+              </div>
             </div>
           </div>
 
-          <CButton title="Search" />
+          <CButton title={t("button.search")} />
         </div>
       </div>
     </div>