next-helios-fe 1.4.16 → 1.4.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/content-container/carousel.tsx

@@ -5,6 +5,7 @@ import { Carousel as Cr } from "flowbite-react";
 interface CarouselProps {
   children: React.ReactNode;
   options?: {
+    variant?: "basic" | "primary";
     interval?: number;
     pauseOnHover?: boolean;
   };
@@ -12,18 +13,54 @@ interface CarouselProps {
 
 export const Carousel: React.FC<CarouselProps> = ({ children, options }) => {
   const childrenList = React.Children.toArray(children);
+  const variant =
+    options?.variant === "primary"
+      ? "bg-gradient-to-r from-primary to-primary-dark text-white"
+      : "bg-secondary-bg";
 
   return (
-    <div className="h-full">
+    <div className="h-full overflow-hidden">
       <Cr
         slideInterval={options?.interval || 5000}
         pauseOnHover={options?.pauseOnHover ?? false}
+        theme={{
+          root: {
+            base: "relative h-full w-full shadow-md",
+            leftControl:
+              "absolute left-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none",
+            rightControl:
+              "absolute right-0 top-0 flex h-full items-center justify-center px-4 focus:outline-none",
+          },
+          indicators: {
+            active: {
+              off:
+                options?.variant === "primary"
+                  ? "bg-white/50 hover:bg-white/70"
+                  : "bg-primary-transparent hover:bg-primary-light",
+              on: options?.variant === "primary" ? "bg-white" : "bg-primary",
+            },
+            base: "h-3 w-3 rounded-full",
+            wrapper: `absolute bottom-4 left-1/2 flex -translate-x-1/2 space-x-3 px-2 py-0.5 rounded-full ${
+              options?.variant === "primary" ? "bg-white/30" : "bg-primary-transparent"
+            }`,
+          },
+          control: {
+            base:
+              options?.variant === "primary"
+                ? "inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 group-hover:bg-white/50 group-focus:outline-none sm:h-10 sm:w-10"
+                : "inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary-transparent group-hover:bg-primary-light group-focus:outline-none sm:h-10 sm:w-10",
+            icon:
+              options?.variant === "primary"
+                ? "h-5 w-5 text-white sm:h-6 sm:w-6"
+                : "h-5 w-5 text-primary sm:h-6 sm:w-6",
+          },
+        }}
       >
         {childrenList?.map((item, index) => {
           return (
             <div
               key={index}
-              className="relative grid w-full h-full px-8 py-10 rounded-md shadow-md bg-gradient-to-r from-primary to-primary-dark text-white"
+              className={`relative grid w-full h-full p-6 rounded-md shadow-md overflow-hidden ${variant}`}
             >
               {item}
             </div>

package/src/components/table/index.tsx

@@ -155,7 +155,7 @@ export const Table: TableComponentProps = ({
   };
 
   const handleOnNextClick = () => {
-    if (page === Math.ceil(data.length / maxRow)) {
+    if (page === data.length) {
       paginationRef.current?.scrollTo({
         left: paginationRef.current.scrollWidth,
         behavior: "smooth",