catchup-library-web 2.6.10 → 2.6.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.6.10",
+  "version": "2.6.12",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/buttons/StartButton.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import BaseLoading from "../loading/BaseLoading";
+import { IButtonProps } from "../../properties/ButtonProperties";
+
+const StartButton = ({
+  title,
+  size,
+  onClick,
+  disabled,
+}: IButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const internalOnClick = async (e: any) => {
+    e.stopPropagation();
+    if (loading) return;
+    if (disabled) return;
+    setLoading(true);
+    await onClick();
+    setLoading(false);
+  };
+
+  let currentHeightClassName;
+  let currentLoadingSize;
+  if (size === "small") {
+    currentHeightClassName = "h-8";
+    currentLoadingSize = 14;
+  } else if (size === "medium") {
+    currentHeightClassName = "h-10";
+    currentLoadingSize = 16;
+  } else if (size === "large") {
+    currentHeightClassName = "h-12";
+    currentLoadingSize = 18;
+  } else if (size === "unlimited") {
+    currentLoadingSize = 14;
+    currentHeightClassName = "h-8";
+  }
+
+  return (
+    <button
+      className={`px-8 py-2.5 bg-gradient-to-r from-catchup-green to-catchup-hover-green text-catchup-white font-bold text-lg rounded-catchup-full shadow-card ${
+        loading
+          ? ""
+          : disabled
+          ? "opacity-50"
+          : "hover:from-catchup-hover-green hover:to-catchup-green hover:shadow-full-card hover:scale-105"
+      } transition-all duration-300 transform ${currentHeightClassName}`}
+      onClick={internalOnClick}
+    >
+      {loading ? (
+        <BaseLoading
+          height={currentLoadingSize}
+          width={currentLoadingSize}
+          primaryColor="#ffffff"
+          secondaryColor="#ffffff"
+        />
+      ) : (
+        <div className="flex flex-row justify-center items-center gap-x-2">
+          <p>{title}</p>
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default StartButton;

package/src/components/tabs/SelectionTab.tsx

@@ -20,17 +20,17 @@ const SelectionTab = ({
                 ? selectedTextColor
                 : "text-catchup-blue-500"
               : textColor
-              ? textColor
-              : "text-catchup-gray-300"
+                ? textColor
+                : "text-catchup-gray-300"
           } ${
             selectedId === option.id
               ? selectedBorderColor
                 ? selectedBorderColor
                 : "border-catchup-blue-500"
               : borderColor
-              ? borderColor
-              : "border-catchup-gray-50"
-          } border-b-2 transition-all duration-300 p-3 cursor-pointer`}
+                ? borderColor
+                : "border-catchup-gray-50"
+          } border-b-2 transition-all duration-300 px-4 py-2 cursor-pointer`}
           onClick={() => {
             handleSelectOnClick(option.id);
           }}

package/src/components/tabs/SelectionTabPill.tsx

@@ -4,6 +4,8 @@ const SelectionTabPill = ({
   optionList,
   selectedId,
   handleSelectOnClick,
+  selectedClassName,
+  unselectedClassName,
 }: ISelectionTabPillProps) => {
   return (
     <div className="flex flex-wrap items-center gap-3 my-2">
@@ -13,8 +15,10 @@ const SelectionTabPill = ({
           onClick={() => handleSelectOnClick(option.id)}
           className={`px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${
             selectedId === option.id
-              ? "bg-catchup-blue text-catchup-white shadow-card"
-              : "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"
+              ? selectedClassName ||
+                "bg-catchup-blue text-catchup-white shadow-card"
+              : unselectedClassName ||
+                "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"
           }`}
         >
           <span className="text-base font-semibold">{option.title}</span>

package/src/index.ts

@@ -8,6 +8,7 @@ export { default as CreateButton } from "./components/buttons/CreateButton";
 export { default as DeleteButton } from "./components/buttons/DeleteButton";
 export { default as CancelButton } from "./components/buttons/CancelButton";
 export { default as ApproveButton } from "./components/buttons/ApproveButton";
+export { default as StartButton } from "./components/buttons/StartButton";
 
 export { default as FullCard } from "./components/cards/FullCard";
 export { default as BaseCard } from "./components/cards/BaseCard";

package/src/properties/TabProperties.ts

@@ -18,4 +18,6 @@ export interface ISelectionTabPillProps {
   optionList: any;
   selectedId: any;
   handleSelectOnClick: (e: any) => void;
+  selectedClassName?: string;
+  unselectedClassName?: string;
 }