update src/components/Datepicker/CalenderList/index.js and src/components/Datepicker/index.js

src/components/Datepicker/Calender/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+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";
+
+const weekDays = [
+  "شنبه",
+  "یکشنبه",
+  "دوشنبه",
+  "سشنبه",
+  "چهارشنبه",
+  "پنجشنبه",
+  "جمعه",
+];
+
+const Calender = () => {
+  return (
+    <div className="calender-list">
+      <Calendar
+        mapDays={({ date }) => {
+          let props = {};
+          let isWeekend = date.weekDay.index === 6;
+
+          if (isWeekend) props.className = "highlight highlight-red";
+
+          return props;
+        }}
+        weekDays={weekDays}
+        arrow={false}
+        calendar={persian}
+        locale={persian_fa}
+      />
+    </div>
+  );
+};
+
+export default Calender;

src/components/Datepicker/CalenderList/index.js

@@ -1,36 +1,22 @@
 import React from "react";
 
-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";
-
-const weekDays = [
-  "شنبه",
-  "یکشنبه",
-  "دوشنبه",
-  "سشنبه",
-  "چهارشنبه",
-  "پنجشنبه",
-  "جمعه",
-];
+import Calender from "../Calender";
 
 const CalenderList = () => {
   return (
-    <div className="calender-list">
-      <Calendar
-        mapDays={({ date }) => {
-          let props = {};
-          let isWeekend = date.weekDay.index === 6;
-
-          if (isWeekend) props.className = "highlight highlight-red";
-
-          return props;
-        }}
-        weekDays={weekDays}
-        arrow={false}
-        calendar={persian}
-        locale={persian_fa}
-      />
+    <div className="bg-surface rounded p-4 w-full flex flex-wrap space-between gap-5">
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
+      <Calender />
     </div>
   );
 };

src/components/Datepicker/index.js

@@ -5,14 +5,16 @@ import RangeDatePicker from "./RangeDatePicker";
 import SimpleCalendar from "./SimpleCalendar";
 import SimpleDatePicker from "./SimpleDatePicker";
 import CalenderList from "./CalenderList";
+import Calender from "./Calender";
 
-function Calender() {
+function Datepicker() {
   const list = {
     1: <DateRangePicker />,
     2: <RangeDatePicker />,
     3: <SimpleCalendar />,
     4: <SimpleDatePicker />,
     5: <CalenderList />,
+    6: <Calender />,
   };
   const [type, setType] = useState(1);
   return (
@@ -30,4 +32,4 @@ function Calender() {
   );
 }
 
-export default Calender;
+export default Datepicker;