@sikka/hawa 0.1.1 → 0.1.2-next

package/src/elements/HawaItemCard.tsx

@@ -1,157 +0,0 @@
-import React, { useEffect, useState, FC } from "react"
-import clsx from "clsx"
-import { HawaMenu } from "./HawaMenu"
-import { HawaButton } from "./HawaButton"
-
-interface ItemCardTypes {
-  headerActions?: THeaderActions[][]
-  header?: any
-  content?: any
-  /** a URL for the image of the card */
-  cardImage?: string
-  /** a function that fires when the card is clicked anywhere */
-  onCardClick?: any
-  /** a React node with HawaIconCount children to have counters at the bottom of the card */
-  counts?: JSX.Element
-  /** The action buttons on the bottom right of the card */
-  actions?: JSX.Element
-  /** The orientation of the card */
-  orientation?: "horizontal" | "vertical"
-  /** Enabling this blurs the image on hover and shows an action button */
-  clickableImage?: boolean
-  /** The function of the action button on the image of the card */
-  clickableImageAction?: () => void
-  /** The text of the action button on the image of the card */
-  clickableImageActionText: string
-  /** The icon of the action button on the image of the card */
-  clickableImageActionIcon?: any
-}
-
-type THeaderActions = {
-  icon?: JSX.Element
-  label: string
-  action?: (e: any) => void
-  isButton?: boolean
-}
-export const HawaItemCard: FC<ItemCardTypes> = ({
-  actions,
-  counts,
-  content,
-  headerActions,
-  clickableImage,
-  clickableImageAction,
-  clickableImageActionText,
-  clickableImageActionIcon,
-  header,
-  cardImage,
-  orientation = "vertical",
-  ...props
-}) => {
-  let defaultStyle =
-    "block rounded border border-gray-200 bg-white shadow-sm hover:shadow-lg transition-all dark:border-gray-700 dark:bg-gray-800 "
-
-  let orientationStyles = {
-    vertical: "max-w-sm",
-    horizontal: "flex flex-row w-full",
-  }
-  let imageStyles = {
-    vertical: "h-auto max-h-56 w-full rounded-t-lg object-cover",
-    horizontal:
-      // "h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg",
-      // "h-full w-full rounded-l-lg object-cover md:w-48 md:rounded-none md:rounded-l-lg",
-      "h-full w-48 rounded-l object-cover",
-  }
-  let headerActionsButtonStyle =
-    "inline-block rounded p-1 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-
-  const [openActionHeader, setOpenActionHeader] = useState(false)
-
-  function handleOpenActionHeader() {
-    setOpenActionHeader(!openActionHeader)
-  }
-
-  useEffect((): any => {
-    window.onclick = () => {
-      if (openActionHeader) {
-        setOpenActionHeader(false)
-      }
-    }
-    return () => (window.onclick = null)
-  }, [openActionHeader])
-
-  return (
-    <div
-      className={clsx(defaultStyle, orientationStyles[orientation])}
-      {...props}
-    >
-      {cardImage && (
-        <div className="group relative overflow-clip">
-          <img
-            src={"https://via.placeholder.com/50"}
-            className={clsx(
-              imageStyles[orientation],
-              clickableImage
-                ? "overflow-clip transition-all group-hover:blur-lg"
-                : ""
-            )}
-          />
-          {clickableImage && (
-            <div className="absolute left-0 top-0 flex h-full w-full items-center  justify-center opacity-0 transition-all group-hover:opacity-100 ">
-              <HawaButton
-                startIcon={clickableImageActionIcon}
-                variant="outlined"
-                onClick={clickableImageAction}
-              >
-                {clickableImageActionText}
-              </HawaButton>
-            </div>
-          )}
-        </div>
-      )}
-      <div className="relative w-full p-6">
-        {headerActions && (
-          <div className="max-h- bg-red absolute right-0 top-0 flex justify-end pr-3 pt-3">
-            <HawaMenu position="top-right" menuItems={headerActions}>
-              <div
-                className={clsx(headerActionsButtonStyle)}
-                onClick={handleOpenActionHeader}
-              >
-                <span className="sr-only">Open dropdown</span>
-                <svg
-                  className="h-6 w-6"
-                  aria-hidden="true"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
-                </svg>
-              </div>
-            </HawaMenu>
-          </div>
-        )}
-
-        {header && (
-          <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-            {header}
-          </h5>
-        )}
-        {content && (
-          <p className="w-full font-normal text-gray-700 dark:text-gray-400">
-            {content}
-          </p>
-        )}
-        {actions || counts ? (
-          <div
-            className={clsx(
-              "mt-3 flex items-center rounded-b-lg dark:text-white ",
-              actions && counts ? "justify-between" : "justify-end"
-            )}
-          >
-            {counts}
-            {actions}
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
-}

package/src/elements/HawaLandingCard.tsx

@@ -1,68 +0,0 @@
-import clsx from "clsx"
-import React, { FC } from "react"
-
-type LandingCardTypes = {
-  orientation: "vertical" | "horizontal"
-  title: string
-  description: string
-  imageURL: string
-  handleHide: any
-  texts?: {
-    titleTip?: string
-    title?: string
-    description?: string
-    linkText?: string
-  }
-  buttonLink?: string
-  className?: any
-}
-export const HawaLandingCard: FC<LandingCardTypes> = ({
-  orientation = "horizontal",
-  ...props
-}) => {
-  let cardStyles = {
-    horizontal:
-      "flex max-w-xl rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
-    vertical:
-      "flex max-w-xs rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",
-  }
-
-  let imageStyles = {
-    horizontal: "w-8 h-8 rounded",
-    vertical: "w-14 h-14 rounded",
-  }
-
-  return (
-    <div
-      className={clsx(
-        cardStyles[orientation],
-        "flex flex-col p-10",
-        "relative overflow-hidden dark:text-white",
-        props.className
-      )}
-      {...props}
-    >
-      {props.texts?.titleTip && (
-        <div className="text-sm text-red-600">{props.texts?.titleTip}</div>
-      )}
-      {props.imageURL && (
-        <img
-          className="absolute -bottom-10 -right-10 h-40 w-auto "
-          src={props.imageURL}
-        />
-      )}
-
-      {props.texts?.title && (
-        <div className="mt-2 text-lg font-medium">{props.texts?.title} </div>
-      )}
-      {props.texts?.description && (
-        <div className="z-10 mt-4 text-sm">{props.texts?.description}</div>
-      )}
-      {props.texts?.linkText && (
-        <div className="z-10 mt-6 text-sm underline underline-offset-8">
-          {props.texts?.linkText}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/elements/HawaLoading.tsx

@@ -1,83 +0,0 @@
-import React, { FC } from "react"
-import clsx from "clsx"
-
-type LoadingTypes = {
-  size?: "button" | "sm" | "normal" | "lg" | "xl"
-  design?: "spinner" | "dots-bounce" | "dots-pulse" | "pulse" | "spinner-dots"
-  color?: any
-}
-
-export const HawaLoading: FC<LoadingTypes> = ({
-  design = "spinner",
-  size = "sm",
-  color,
-  ...props
-}) => {
-  let sizeStyles = {
-    button: "h-4 w-4",
-    sm: "h-6 w-6",
-    normal: "h-8 w-8",
-    lg: "h-14 w-14",
-    xl: "h-24 w-24",
-  }
-
-  let animationStyles = {
-    pulse: "animate-in fade-in duration-1000",
-    bounce: "animate-bounce",
-  }
-  switch (design.split("-")[0]) {
-    case "dots":
-      return (
-        <div className="flex flex-row gap-2">
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-100 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-              color ? color : "bg-primary-foreground"
-            )}
-          ></div>
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-200 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-
-              color ? color : "bg-primary-foreground"
-            )}
-          ></div>
-          <div
-            className={clsx(
-              "animate-bounce rounded-full delay-300 repeat-infinite",
-              size === "button" ? "h-2 w-2" : sizeStyles[size],
-              animationStyles[design.split("-")[1]],
-
-              color ? color : "bg-primary-foreground"
-            )}
-          ></div>
-        </div>
-      )
-
-    default:
-      return (
-        <div className="flex flex-row gap-x-3">
-          <div aria-label="Loading..." role="status">
-            <svg
-              className={clsx(sizeStyles[size], "animate-spin")}
-              viewBox="3 3 18 18"
-            >
-              <path
-                className="fill-gray-200"
-                d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"
-              ></path>
-              <path
-                // className="fill-buttonPrimary-500 "
-                className={color ? color : "fill-buttonPrimary-500"}
-                d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"
-              ></path>
-            </svg>
-          </div>
-        </div>
-      )
-  }
-}

package/src/elements/HawaLogoButton.tsx

@@ -1,154 +0,0 @@
-import React, { FC } from "react"
-
-type LogoButtonTypes = {
-  lang?: any
-  logo?:
-    | "google"
-    | "github"
-    | "twitter"
-    | "wallet"
-    | "googlepay"
-    | "applepay"
-    | "stcpay"
-    | "visa/master"
-    | "paypal"
-    | "mada"
-  onClick?: any
-  buttonText?: any
-  direction?: "rtl" | "ltr"
-}
-export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
-  let isArabic = props.lang === "ar"
-  let logoElement: any = ""
-  switch (props.logo?.toLowerCase()) {
-    case "google":
-      logoElement = (
-        <img
-          src={
-            "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
-          }
-          className="h-6"
-        />
-      )
-      break
-    case "github":
-      logoElement = (
-        <svg width="32px" height="32px" viewBox="0 0 32 32" className="h-7 w-7">
-          <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
-        </svg>
-      )
-      break
-    case "twitter":
-      logoElement = (
-        <svg
-          version="1.1"
-          x="0px"
-          y="0px"
-          className="h-5 w-5"
-          viewBox="0 0 512.002 512.002"
-        >
-          <path
-            // style="fill:#73A1FB;"
-            d="M500.398,94.784c-8.043,3.567-16.313,6.578-24.763,9.023c10.004-11.314,17.631-24.626,22.287-39.193
-     c1.044-3.265-0.038-6.839-2.722-8.975c-2.681-2.137-6.405-2.393-9.356-0.644c-17.945,10.643-37.305,18.292-57.605,22.764
-     c-20.449-19.981-48.222-31.353-76.934-31.353c-60.606,0-109.913,49.306-109.913,109.91c0,4.773,0.302,9.52,0.9,14.201
-     c-75.206-6.603-145.124-43.568-193.136-102.463c-1.711-2.099-4.347-3.231-7.046-3.014c-2.7,0.211-5.127,1.734-6.491,4.075
-     c-9.738,16.709-14.886,35.82-14.886,55.265c0,26.484,9.455,51.611,26.158,71.246c-5.079-1.759-10.007-3.957-14.711-6.568
-     c-2.525-1.406-5.607-1.384-8.116,0.054c-2.51,1.439-4.084,4.084-4.151,6.976c-0.012,0.487-0.012,0.974-0.012,1.468
-     c0,39.531,21.276,75.122,53.805,94.52c-2.795-0.279-5.587-0.684-8.362-1.214c-2.861-0.547-5.802,0.456-7.731,2.638
-     c-1.932,2.18-2.572,5.219-1.681,7.994c12.04,37.591,43.039,65.24,80.514,73.67c-31.082,19.468-66.626,29.665-103.939,29.665
-     c-7.786,0-15.616-0.457-23.279-1.364c-3.807-0.453-7.447,1.795-8.744,5.416c-1.297,3.622,0.078,7.66,3.316,9.736
-     c47.935,30.735,103.361,46.98,160.284,46.98c111.903,0,181.907-52.769,220.926-97.037c48.657-55.199,76.562-128.261,76.562-200.451
-     c0-3.016-0.046-6.061-0.139-9.097c19.197-14.463,35.724-31.967,49.173-52.085c2.043-3.055,1.822-7.094-0.545-9.906
-     C507.7,94.204,503.76,93.294,500.398,94.784z"
-          />
-        </svg>
-      )
-      break
-    case "mada":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
-          className="h-6"
-        />
-      )
-      break
-    case "stcpay":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
-          // height={20}
-          className="h-6"
-        />
-      )
-      break
-    case "visa/master":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
-          className="h-6"
-        />
-      )
-      break
-    case "paypal":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
-          className="h-6"
-        />
-      )
-      break
-    case "googlepay":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
-          className="h-6"
-        />
-      )
-      break
-    case "applepay":
-      logoElement = (
-        <img
-          src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
-          className="h-11"
-        />
-      )
-      break
-    case "wallet":
-      logoElement = (
-        <svg version="1.1" viewBox="0 0 223 223" className="h-6 w-6">
-          <g>
-            <path
-              d="M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z
-           M169.515,123.967c-7.082,0-12.823-5.741-12.823-12.823c0-7.082,5.741-12.823,12.823-12.823c7.082,0,12.823,5.741,12.823,12.823
-          C182.338,118.225,176.597,123.967,169.515,123.967z"
-            />
-            <path
-              d="M123.509,68.5H205v-33c0-8.271-6.395-15-14.667-15h-175C7.062,20.5,0,27.229,0,35.5v152c0,8.271,7.062,15,15.333,15h175
-          c8.271,0,14.667-6.729,14.667-15v-34h-81.342L123.509,68.5z"
-            />
-          </g>
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-
-  return (
-    <button
-      dir={props.direction}
-      // style={{ direction: isArabic ? "rtl" : "ltr" }}
-      onClick={props.onClick}
-      className="my-2 flex h-11 w-full flex-row justify-center rounded border bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
-    >
-      <div className="flex h-full flex-row items-center justify-end">
-        {logoElement}
-      </div>
-      <div style={{ width: 10 }} />
-      <div className="flex h-full flex-col items-start justify-center dark:text-black">
-        {props.buttonText}
-      </div>
-    </button>
-  )
-}

package/src/elements/HawaMenu.tsx

@@ -1,226 +0,0 @@
-import React, { ReactNode, useEffect, useRef, useState, FC } from "react"
-import clsx from "clsx"
-
-// TODO: add width to decrease width
-
-interface TMenuTypes {
-  menuItems: MenuItems[][]
-  withHeader?: boolean
-  headerTitle?: string
-  headerSubtitle?: string
-  direction?: "rtl" | "ltr"
-  anchor?: any
-  children?: ReactNode
-  position?:
-    | "left-top"
-    | "left-bottom"
-    | "right-top"
-    | "right-bottom"
-    | "top-right"
-    | "top-left"
-    | "bottom-right"
-    | "bottom-left"
-  onClickOutside?: any
-  actionedItem?: any
-  size?: "small" | "normal" | "large"
-}
-
-type MenuItems = {
-  icon?: JSX.Element
-  disabled?: boolean
-  label: string
-  action?: (e: any) => void
-  isButton?: boolean
-  element?: any
-}
-
-export const HawaMenu: FC<TMenuTypes> = ({
-  menuItems,
-  withHeader,
-  direction = "ltr",
-  headerTitle,
-  headerSubtitle,
-  size = "normal",
-  children,
-  onClickOutside,
-  actionedItem,
-  position = "top-right",
-}) => {
-  const [menuOpened, setMenuOpened] = useState(false)
-  const childrenRef = useRef(null)
-  const [childrenHeight, setChildrenHeight] = useState(null)
-  const [childrenWidth, setChildrenWidth] = useState(null)
-  const menuRef = useRef(null)
-  const [menuWidth, setMenuWidth] = useState(null)
-  const [menuHeight, setMenuHeight] = useState(null)
-
-  useEffect(() => {
-    setMenuHeight(menuRef.current?.getBoundingClientRect().height)
-    setMenuWidth(menuRef.current?.getBoundingClientRect().width)
-    setChildrenHeight(childrenRef.current?.getBoundingClientRect().height)
-    setChildrenWidth(childrenRef.current?.getBoundingClientRect().width)
-
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setMenuOpened(false)
-      }
-    }
-    document.addEventListener("click", handleClickOutside, true)
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true)
-    }
-  }, [onClickOutside])
-
-  let defaultStyles =
-    "border-none absolute ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
-  let sizeStyles = {
-    small: "text-[11px] p-1 px-4 m-0",
-    normal: "py-2 px-4",
-    large: "",
-  }
-  let menuCoordinates
-  let spacing = 5
-  switch (position) {
-    case "top-right":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${menuWidth - childrenWidth}px, -${
-              menuHeight + childrenHeight + spacing
-            }px`
-          : `0px, -${menuHeight + childrenHeight + spacing}px`
-      break
-    case "top-left":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${0}px, -${menuHeight + childrenHeight + spacing}px`
-          : `-${menuWidth - childrenWidth}px, -${
-              menuHeight + childrenHeight + spacing
-            }px`
-      break
-    case "bottom-right":
-      menuCoordinates =
-        direction === "rtl"
-          ? `-${0}px, ${spacing}px`
-          : `-${childrenWidth - menuWidth}px, ${spacing}px`
-
-      break
-    case "bottom-left":
-      menuCoordinates =
-        direction === "rtl"
-          ? `0px, ${spacing}px`
-          : `-${menuWidth - childrenWidth}px,${spacing}px`
-      break
-    case "right-bottom":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${menuWidth + spacing}px, -${childrenHeight}px`
-          : `${childrenWidth + spacing}px, -${childrenHeight}px`
-      break
-    case "right-top":
-      menuCoordinates =
-        direction === "rtl"
-          ? `${menuWidth + spacing}px, -${menuHeight}px`
-          : `${childrenWidth + spacing}px, -${menuHeight}px`
-      break
-    case "left-bottom":
-      menuCoordinates =
-        direction === "rtl"
-          ? `-${childrenWidth + spacing}px, -${childrenHeight}px`
-          : `-${menuWidth + spacing}px, -${childrenHeight}px`
-      break
-    case "left-top":
-      menuCoordinates =
-        direction === "rtl"
-          ? `-${childrenWidth + spacing}px, -${menuHeight}px`
-          : `-${menuWidth + spacing}px, -${menuHeight}px`
-      break
-
-    default:
-      menuCoordinates = `-${menuWidth / 2}px, -${
-        childrenHeight + menuHeight / 2
-      }px`
-
-      break
-  }
-  return (
-    <div
-      onClick={() => {
-        if (menuOpened) setMenuOpened(false)
-        else setMenuOpened(true)
-      }}
-    >
-      <div ref={childrenRef}>{children}</div>
-
-      <div
-        ref={menuRef}
-        style={{
-          position: "absolute",
-          width: "max-content",
-          transform: `translate(${menuCoordinates})`,
-          maxWidth: "200px",
-        }}
-        className={clsx(
-          defaultStyles,
-          menuOpened ? "opacity-100" : "invisible opacity-0"
-        )}
-      >
-        {withHeader && (
-          <div className="px-4 py-3 text-xs text-gray-900 dark:text-white">
-            <div>{headerTitle}</div>
-            <div className="truncate font-medium">{headerSubtitle}</div>
-          </div>
-        )}
-        {menuItems?.map((group, o) => {
-          return (
-            <ul
-              key={o}
-              className="bg-layout-1200 flex flex-col gap-1 p-1 text-gray-700 dark:text-gray-200"
-            >
-              {group?.map((item, indx) => {
-                return item.element ? (
-                  <li
-                    key={indx}
-                    className="cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
-                  >
-                    {item.element}
-                  </li>
-                ) : (
-                  <li
-                    key={indx}
-                    onClick={() => {
-                      if (item.disabled) {
-                        console.log("button is disabled")
-                      } else {
-                        item?.action(actionedItem)
-                      }
-                    }}
-                    className={clsx(
-                      "transition-all",
-                      item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded-inner bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
-                        : item.disabled
-                        ? "text-gray-300"
-                        : " flex cursor-pointer flex-row items-center rounded-inner hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
-                      sizeStyles[size]
-                    )}
-                  >
-                    {item.icon && (
-                      <div
-                        className={
-                          size === "small" ? "mr-1 rtl:ml-1" : "mr-2 rtl:ml-2"
-                        }
-                      >
-                        {item.icon}
-                      </div>
-                    )}
-                    {item.label}
-                  </li>
-                )
-              })}
-            </ul>
-          )
-        })}
-      </div>
-    </div>
-  )
-}