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

src/components/ButtonDesign/ButtonNextToEachOther/index.js

@@ -1,26 +1,16 @@
 import React from "react";
 import Button from "../Button";
 
-const ButtonNextToEachOther = () => {
+const ButtonNextToEachOther = ({ buttons }) => {
   return (
     <div className="flex flex-row">
       <div className="flex flex-row">
+        {buttons.map((button, i) => (
           <Button
-          text={"روز"}
+            text={button.title}
-          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2 rounded-tr-lg rounded-br-lg"
+            className={`${button.className} w-16 text-primaryText text-lg  border border-primary px-4 py-2`}
-        />
-        <Button
-          text={"هفته"}
-          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2"
-        />
-        <Button
-          text={"ماه"}
-          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2"
-        />
-        <Button
-          text={"سال"}
-          className="w-16 text-primaryText text-lg  border border-primary px-4 py-2 rounded-tl-lg rounded-bl-lg"
           />
+        ))}
       </div>
       <div className="flex flex-row mr-5">
         <Button
@@ -33,3 +23,24 @@ const ButtonNextToEachOther = () => {
 };
 
 export default ButtonNextToEachOther;
+
+ButtonNextToEachOther.defaultProps = {
+  buttons: [
+    {
+      title: "روز",
+      className: "rounded-tr-lg rounded-br-lg",
+    },
+    {
+      title: "هفته",
+      className: "",
+    },
+    {
+      title: "ماه",
+      className: "",
+    },
+    {
+      title: "سال",
+      className: "rounded-tl-lg rounded-bl-lg",
+    },
+  ],
+};

src/components/Datepicker/CalenderList/index.js

@@ -22,3 +22,5 @@ const CalenderList = () => {
 };
 
 export default CalenderList;
+
+CalenderList.defaultProps = {};