update 5 files

src/App.js

@@ -86,6 +86,7 @@ import LeafletMap from "./components/LeafletMap";
 import CssCountdown from "./components/CssCountdown";
 
 import TestComponentNew from "./components/TestComponentNew";
+import DateRangePicker from "./components/DateRangePicker";
 
 function App() {
   return (
@@ -131,14 +132,14 @@ function App() {
         {/* <SidebarDesign2 className="w-1/5" /> */}
         {/* <FileManager /> */}
         {/* <GridListTable /> */}
-        {/* <PopupCard /> */}
+        <PopupCard />
         {/* <TimeLine /> */}
         {/* <CardTrelloDesign /> */}
         {/* <ReligiousTimes /> */}
         {/* <DistributedData /> */}
         {/* <CardDesign1 /> */}
         {/* <CardDesign2 /> */}
-        <LeafletMap />
+        {/* <LeafletMap /> */}
         {/* *************************************************** mini components ***************************************************  */}
         {/* <Button /> */}
         {/* <ButtonDesign /> */}
@@ -170,7 +171,7 @@ function App() {
         {/* <IconText /> */}
         {/* <CustomToast /> */}
         {/* <CssCountdown /> */}
-
+        <DateRangePicker />
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/DateRangePicker/index.js

@@ -0,0 +1,53 @@
+import React from "react";
+
+import DatePicker from "react-multi-date-picker";
+import { Calendar } from "react-multi-date-picker";
+
+import persian from "react-date-object/calendars/persian";
+import persian_fa from "react-date-object/locales/persian_fa";
+import DatePanel from "react-multi-date-picker/plugins/date_panel";
+
+const weekDays = [
+  "شنبه",
+  "یکشنبه",
+  "دوشنبه",
+  "سشنبه",
+  "چهارشنبه",
+  "پنجشنبه",
+  "جمعه",
+];
+
+function CustomButton({ direction, handleClick, disabled }) {
+  return (
+    <i
+      onClick={handleClick}
+      style={{
+        padding: "0 10px",
+        fontWeight: "bold",
+        color: disabled ? "gray" : "blue",
+      }}
+      className={disabled ? "cursor-default" : "cursor-pointer"}
+    >
+      {direction === "right" ? ">" : "<"}
+    </i>
+  );
+}
+
+const DateRangePicker = () => {
+  return (
+    <>
+      <Calendar
+        range
+        calendar={persian}
+        locale={persian_fa}
+        weekDays={weekDays}
+        minDate={new Date()}
+        renderButton={<CustomButton />}
+        calendarPosition="bottom-right"
+        plugins={[<DatePanel position="bottom" />]}
+      />
+    </>
+  );
+};
+
+export default DateRangePicker;

src/components/LeafletMap/index.js

@@ -15,7 +15,6 @@ import { EditControl } from "react-leaflet-draw";
 import "leaflet-draw";
 import "./index.scss";
 import grid from "../../assets/images/grid.png";
-// import Grid from "./Grid";
 const outerBounds = [
   [50.505, -29.09],
   [52.505, 29.09],
@@ -26,14 +25,6 @@ const LeafletMap = () => {
   const onCreated = (e) => {
     const drawnItems = leafEl.current._layers;
     console.log({ drawnItems });
-    // if (Object.keys(drawnItems).length > 1) {
-    //   Object.keys(drawnItems).forEach((layerid, index) => {
-    //     if (index > 0) return;
-    //     const layer = drawnItems[layerid];
-    //     leafEl.current.removeLayer(layer);
-    //   });
-    //   console.log(drawnItems);
-    // }
   };
 
   return (

src/index.css

@@ -20,7 +20,3 @@ body {
   padding-right: 4px;
   border-radius: 50%;
 }
-/*# sourceMappingURL=index.css.map */
-.leaflet-control-scale-line:not(:first-child) {
-  display: none !important;
-}