update App.js, src/components/TestComponentNew/index.js and src/components/TestComponentNew/index.scss

src/App.js

@@ -171,7 +171,7 @@ function App() {
         {/* <IndianaDragScroll /> */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
-        <DateRangePicker />
+        {/* <DateRangePicker /> */}
         {/* <div className="flex">
           <SidebarDesign2 className="w-1/5" />
           <span className="w-4/5 ">

src/components/TestComponentNew/index.js

@@ -36,24 +36,29 @@ function DisablePassedDaies({ direction, handleClick, disabled }) {
 }
 
 function CustomRangeInput({ openCalendar, value }) {
-  // let from = value[0] || "";
-  // let to = value[1] || "";
-
-  // value = from && to ? "از " + from + "، تا " + to": from
   useEffect(() => {
     openCalendar();
   }, []);
 
   return (
-    <div>
+    <div className="flex flex-row items-center bg-red-600">
-      <input onFocus={openCalendar} value={value[0]} readOnly />
+      <input
-      <input onFocus={openCalendar} value={value[1]} readOnly />
+        className="w-full py-1 text-center text-sm rounded-md border border-gray-200 focus:outline-none focus:border-sky-200 focus:ring-sky-200 focus:ring-1"
+        onFocus={openCalendar}
+        value={value[0]}
+        readOnly
+      />
+      <p className="mx-2 text-sm">تا</p>
+      <input
+        className="w-full py-1 text-center text-sm rounded-md border border-gray-200 focus:outline-none focus:border-sky-200 focus:ring-sky-200 focus:ring-1"
+        onFocus={openCalendar}
+        value={value[1]}
+        readOnly
+      />
     </div>
   );
 }
 const TestComponentNew = () => {
-  const [shouldOpenCalendar, setShouldOpenCalendar] = useState(false);
-
   return (
     <div
       className="bg-pink-100 w-1/2 mx-auto mt-20"
@@ -80,6 +85,7 @@ const TestComponentNew = () => {
           width: "100%",
           height: "33px",
           boxSizing: "border-box",
+          backgroundColor: "red",
         }}
       />
     </div>

src/components/TestComponentNew/index.scss

@@ -1,18 +1,18 @@
 .custom-input {
-  border-radius: 15px;
+  // border-radius: 15px;
-  border: 1px #0c8af8 solid;
+  // border: 1px #0c8af8 solid;
-  padding: 4px 12px;
+  // padding: 4px 12px;
-  background-color: white;
+  // background-color: white;
-  height: 22px;
+  // height: 22px;
-  box-shadow: 0 0 2px #0074d9;
+  // box-shadow: 0 0 2px #0074d9;
   // display: none !important;
 }
 
-.custom-input:focus {
+// .custom-input:focus {
-  outline: none;
+//   outline: none;
-  border: 1px solid #0c8af8;
+//   border: 1px solid #0c8af8;
-  box-shadow: 0 0 10px 2px #0074d9;
+//   box-shadow: 0 0 10px 2px #0074d9;
-}
+// }
 
 .rmdp-arrow-container {
   background-color: #0074d9;