sprint-asia-custom-component 0.1.72 → 0.1.74

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/datepicker/index.js

@@ -1,35 +1,42 @@
-import React, {useState} from "react";
+import React from "react";
 import DatePicker from "react-datepicker";
-import 'react-datepicker/dist/react-datepicker.css';
-import { PiCalendarDuotone } from "react-icons/pi";
+import "react-datepicker/dist/react-datepicker.css";
+import { PiCalendarBlankDuotone } from "react-icons/pi";
 
-const CustomDatePicker = ({
-    startDate,
-    onChangeStartDate,
-    endDate,
-    onChangeEndDate
-}) => {
-    const onChange = (dates) => {
-        const [start, end] = dates
-        onChangeStartDate(start)
-        onChangeEndDate(end)
-    };
+const CustomDatePicker = ({ startDate, onChangeStartDate, endDate, onChangeEndDate, isRequired, title, className }) => {
+  const onChange = (dates) => {
+    const [start, end] = dates;
+    onChangeStartDate(start);
+    onChangeEndDate(end);
+  };
 
   return (
-    <div className="cursor-pointer h-full border border-neutral40 bg-neutral20 rounded-md w-fit flex items-center">
+    <div className={`w-full ${className}`}>
+      {title && (
+        <div className="flex">
+          <p className="text-sm font-normal text-black mb-1">{title}</p>
+          {isRequired && <p className="text-sm font-normal text-danger500 ml-1">*</p>}
+        </div>
+      )}
+
+      <div className="cursor-pointer py-1 border border-neutral40 bg-neutral20 rounded-md w-fit flex items-center">
         <div className="p-2">
-            <PiCalendarDuotone size={16} className="text-neutral300"/>
+          <PiCalendarBlankDuotone size={16} className="text-neutral300" />
         </div>
+
         <DatePicker
-            selected={startDate}
-            onChange={onChange}
-            startDate={startDate}
-            endDate={endDate}
-            selectsRange
-            utcOffset={0}
-            className="cursor-pointer bg-neutral20 text-neutral300 rounded-md pr-2 focus:outline-none text-sm"
+          selected={startDate}
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          selectsRange
+          utcOffset={0}
+          dateFormat="d MMM yyyy"
+          className="cursor-pointer bg-neutral20 text-neutral300 rounded-md pr-2 focus:outline-none text-sm"
         />
+      </div>
     </div>
-)}
+  );
+};
 
-export default CustomDatePicker;
+export default CustomDatePicker;

package/src/components/table/headerTable/index.js

@@ -7,7 +7,7 @@ const HeaderTable = ({
     <thead>
         <tr>
             {dataHeader.map((value, index) => (
-                <th key={index} className="py-3.5 px-4 bg-neutral40 text-neutral500 text-sm font-semibold text-left">
+                <th key={index} className="py-3.5 px-4 bg-neutral20 text-neutral500 text-sm font-medium text-left">
                     <p>{value.toUpperCase()}</p>
                 </th>
             ))}