@sikka/hawa 0.0.103 → 0.0.105

package/src/elements/HawaItemCard.tsx

@@ -1,25 +1,54 @@
+import clsx from "clsx"
 import React, { useEffect } from "react"
 import { useState } from "react"
+import { HawaMenu } from "./HawaMenu"
 
-type ItemCardTypes = {
-  actions: any
-  content: any
-  headerActions: any
-  //     label: PropTypes.string,
-  //     action: PropTypes.func,
-  header: any
-  lang: string
+interface ItemCardTypes {
+  actions?: any
+  content?: any
+  headerActions?: THeaderActions[][]
+  header?: any
+  lang?: string
+  cardImage?: string
   onCardClick?: any
+  orientation?: "horizontal" | "vertical"
 }
 
+type THeaderActions = {
+  icon?: JSX.Element
+  label: string
+  action?: (
+    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    item: string
+  ) => void
+  isButton?: boolean
+}
 export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
   actions,
   content,
   headerActions,
   header,
+  cardImage,
+  orientation = "vertical",
   ...props
 }) => {
+  let defaultStyle =
+    "block rounded-lg 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",
+  }
+  let headerActionsButtonStyle =
+    "inline-block rounded-lg 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)
+  const [openDropDown, setOpenDropDown] = useState(false)
 
   function handleOpenActionHeader() {
     setOpenActionHeader(!openActionHeader)
@@ -37,61 +66,60 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
 
   return (
     <div
-      className="relative block max-w-sm rounded-lg border border-gray-200 bg-white pt-6 shadow-md  dark:border-gray-700 dark:bg-gray-800 "
+      className={clsx(defaultStyle, orientationStyles[orientation])}
       {...props}
     >
-      {headerActions && (
-        <div className="absolute right-0 top-0 flex justify-end pt-3 pr-3">
-          <button
-            id="dropdownButton"
-            data-dropdown-toggle="dropdown"
-            className="inline-block rounded-lg 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"
-            type="button"
-            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"
-              xmlns="http://www.w3.org/2000/svg"
+      {cardImage && (
+        <img
+          src={"https://via.placeholder.com/50"}
+          // className=" h-full w-full max-w-sm bg-red-500  bg-[url('https://via.placeholder.com/50')] bg-cover bg-no-repeat"
+          className={clsx(imageStyles[orientation])}
+          // className="h-40 w-fit rounded-tl-lg rounded-bl-lg bg-[url('https://via.placeholder.com/50')] bg-cover bg-no-repeat          "
+          // className="h-auto w-full rounded-l-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
+        />
+      )}
+      <div className="relative w-full  px-6 pt-6">
+        {headerActions && (
+          <div className="max-h- bg-red absolute right-0 top-0 flex justify-end pt-3 pr-3">
+            <HawaMenu
+              buttonPosition="top-right"
+              menuItems={headerActions}
+              handleClose={setOpenDropDown}
+              open={openDropDown}
             >
-              <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>
-          </button>
-          <div
-            id="dropdown"
-            className={`absolute ${
-              openActionHeader ? "block" : "hidden"
-            } right-0 top-7 z-10 w-44 list-none divide-y divide-gray-100 rounded bg-white text-base shadow dark:bg-gray-700`}
-          >
-            <ul className="py-1" aria-labelledby="dropdownButton">
-              {headerActions.map((singleAction: any) => {
-                return (
-                  <li onClick={singleAction.action}>
-                    <a
-                      href="#"
-                      className="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
-                    >
-                      {singleAction.label}
-                    </a>
-                  </li>
-                )
-              })}
-            </ul>
+              <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"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <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>
-        </div>
-      )}
-      <div className="px-6">
-        <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          {header}{" "}
-        </h5>
-        <p className="font-normal text-gray-700 dark:text-gray-400">
-          {content}
-        </p>
+        )}
+
+        {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 && (
+          <div className="flex justify-end rounded-b-lg p-3">{actions}</div>
+        )}
       </div>
-      <div className="mt-6 flex justify-end rounded-b-lg p-3">{actions}</div>
     </div>
   )
 }

package/src/elements/HawaMenu.tsx

@@ -2,29 +2,26 @@ import clsx from "clsx"
 import React, { ReactNode } from "react"
 
 interface TMenuTypes {
-  popMenuID: any
   menuItems: MenuItems[][]
-  //
-  //         icon: PropTypes.element,
-  //         label: PropTypes.string,
-  //        action: PropTypes.func,
-  //
   withHeader?: boolean
   withIcons?: boolean
   headerTitle?: string
   headerSubtitle?: string
-  open: boolean
-  handleClose: (e : boolean) => void
+  open?: boolean
+  handleClose?: (e: boolean) => void
   anchor?: any
   children?: ReactNode
   buttonPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
 }
 
-type MenuItems =  {
-  icon ?: JSX.Element,
-  label : string,
-  action ?: (e : React.MouseEvent<HTMLLIElement, MouseEvent>,item : string) => void
-  isButton ?: boolean
+type MenuItems = {
+  icon?: JSX.Element
+  label: string
+  action?: (
+    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
+    item: string
+  ) => void
+  isButton?: boolean
 }
 
 export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
@@ -39,7 +36,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   children,
 }) => {
   let defaultStyles =
-    "absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-white shadow transition-all dark:bg-gray-700"
+    "border-none ring-offset-1 absolute z-10 w-44 divide-y divide-gray-100 overflow-y-clip rounded-lg bg-gray-50 shadow-lg transition-all dark:bg-gray-700"
   let positionStyles = {
     "top-right": "top-30 right-0",
     "top-left": "top-30 left-0",
@@ -47,51 +44,49 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
     "bottom-left": "bottom-30 left-0",
   }
   let animationStyles = {
-    opened: "max-h-72 animate-expandDown",
-    closed: "max-h-0 opacity-0 animate-expandUp",
+    opened: "max-h-fit",
+    closed: "h-0 ",
   }
   return (
-    <div className="">
-      <div className="relative w-fit" onClick={() => handleClose(!open)}>
-        {children}
+    <div className="relative w-fit " onClick={() => handleClose(!open)}>
+      {children}
 
-        <div
-          className={clsx(
-            defaultStyles,
-            positionStyles[buttonPosition],
-            open ? animationStyles.opened : animationStyles.closed
-          )}
-        >
-          {withHeader && (
-            <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
-              <div>{headerTitle}</div>
-              <div className="truncate font-medium">{headerSubtitle}</div>
-            </div>
-          )}
-          {menuItems.map((group) => {
-            return (
-              <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
-                {group.map((item) => {
-                  return (
-                    <li
-                      onClick={(e) => item.action(e, item.label)}
-                      className={
-                        item.isButton
-                          ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
-                          : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-100 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
-                      }
-                    >
-                      {withIcons && (
-                        <div className="mr-2 rtl:ml-2">{item.icon}</div>
-                      )}
-                      {item.label}
-                    </li>
-                  )
-                })}
-              </ul>
-            )
-          })}
-        </div>
+      <div
+        className={clsx(
+          defaultStyles,
+          positionStyles[buttonPosition],
+          open ? animationStyles.opened : animationStyles.closed
+        )}
+      >
+        {withHeader && (
+          <div className="py-3 px-4 text-sm text-gray-900 dark:text-white">
+            <div>{headerTitle}</div>
+            <div className="truncate font-medium">{headerSubtitle}</div>
+          </div>
+        )}
+        {menuItems.map((group) => {
+          return (
+            <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+              {group?.map((item) => {
+                return (
+                  <li
+                    onClick={(e) => item.action(e, item.label)}
+                    className={
+                      item.isButton
+                        ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
+                        : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-100 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+                    }
+                  >
+                    {withIcons && (
+                      <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                    )}
+                    {item.label}
+                  </li>
+                )
+              })}
+            </ul>
+          )
+        })}
       </div>
     </div>
   )

package/src/elements/HawaModal.tsx

@@ -1,10 +1,11 @@
+import clsx from "clsx"
 import React, { ReactElement, useEffect } from "react"
 
 type ModalTypes = {
   open: boolean
   title: string
   onClose: () => void
-  // closeOnClickOutside: any
+  closeOnClickOutside?: boolean
   modalID?: string
   children: ReactElement
   actions: any
@@ -13,63 +14,68 @@ export const HawaModal: React.FunctionComponent<ModalTypes> = ({
   open,
   title,
   onClose,
+  closeOnClickOutside = true,
   ...props
 }) => {
-  // useEffect((): any => {
-  //   if (closeOnClickOutside) {
-  //     window.onclick = () => {
-  //       console.log("open : ", open)
-  //       if (open) {
-  //         console.log("Im clicing")
-  //         onClose()
-  //       }
-  //     }
-  //   }
-  //   return () => (window.onclick = null)
-  // }, [open])
+  let defaultStyle =
+    "absolute top-1/2 left-1/2 w-full h-screen flex flex-col justify-center items-center -translate-x-1/2 -translate-y-1/2 transition-all"
+  useEffect((): any => {
+    if (closeOnClickOutside && open) {
+      window.onclick = (e) => {
+        e.stopPropagation()
+        console.log("open : ", open)
+        console.log("Im clicing")
+        onClose()
+      }
+    }
+    return () => (window.onclick = null)
+  }, [open])
   return (
     <div
-      id={props.modalID}
-      tabIndex={-1}
-      aria-hidden="true"
-      className={`${
-        open ? "block" : "hidden"
-      } h-modal fixed top-0 right-0 left-0 z-50 w-full items-center justify-center overflow-y-auto overflow-x-hidden md:inset-0 md:h-full`}
+      className={clsx(
+        defaultStyle,
+        open ? "z-10  opacity-100 " : "invisible -z-10 opacity-0"
+      )}
     >
-      <div className="relative h-full w-full max-w-2xl p-4 md:h-auto">
-        <div className="relative rounded-lg bg-white shadow dark:bg-gray-700">
-          <div className="flex items-start justify-between rounded-t border-b p-4 dark:border-gray-600">
-            <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-              {title}
-            </h3>
-            <button
-              type="button"
-              className="ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-              data-modal-toggle="defaultModal"
-              onClick={(e) => {
-                onClose()
-              }}
+      <div
+        className={clsx(
+          "absolute h-screen w-full bg-gray-500 opacity-50",
+          open ? "opacity-50" : "opacity-0"
+        )}
+      ></div>
+
+      <div className="relative w-1/2 max-w-md rounded-lg bg-white p-1 shadow-lg dark:bg-gray-700">
+        <div className="flex items-start justify-between rounded-t p-3 dark:border-gray-600">
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+            {title}
+          </h3>
+          <button
+            type="button"
+            className="inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+            data-modal-toggle="defaultModal"
+            onClick={(e) => {
+              onClose()
+            }}
+          >
+            <svg
+              aria-hidden="true"
+              className="h-5 w-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                aria-hidden="true"
-                className="h-5 w-5"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                  clip-rule="evenodd"
-                ></path>
-              </svg>
-              <span className="sr-only">Close modal</span>
-            </button>
-          </div>
-          <div className="space-y-6 p-6">{props.children}</div>
-          <div className="flex items-center space-x-2 rounded-b border-t border-gray-200 p-6 dark:border-gray-600">
-            {props.actions}
-          </div>
+              <path
+                fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span className="sr-only">Close modal</span>
+          </button>
+        </div>
+        <div className="space-y-6 p-3">{props.children}</div>
+        <div className="mx-2 flex items-center justify-end space-x-1  p-0  dark:border-gray-600">
+          {props.actions}
         </div>
       </div>
     </div>

package/src/elements/HawaRadio.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React, { useState } from "react"
 
 type RadioTypes = {
@@ -8,15 +9,22 @@ type RadioTypes = {
 export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active"
+    "inline-block py-2 px-4  w-full text-white bg-blue-600 rounded-lg active"
   let inactiveTabStyle =
-    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+    "inline-block py-2 px-4 w-full bg-gray-100 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 
   return (
     <div>
-      <ul className="flex w-fit flex-wrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
+      <ul
+        className={clsx(
+          props.options.length > 2
+            ? "flex-wrap xs:max-w-full xs:flex-nowrap"
+            : "",
+          "flex max-w-fit flex-row whitespace-nowrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
+        )}
+      >
         {props.options?.map((opt: any) => (
-          <li>
+          <li className="w-full">
             <button
               aria-current="page"
               onClick={() => {

package/src/elements/HawaSelect.tsx

@@ -68,7 +68,7 @@ const Menu: React.FunctionComponent<MenuTypes> = ({
 }) => {
   return (
     <div
-      className="absolute mt-2 w-full rounded-lg bg-white"
+      className="absolute z-10 mt-2 w-full rounded-lg bg-white ring-1 ring-blue-200"
       ref={innerRef}
       {...innerProps}
       // {...props}
@@ -81,7 +81,7 @@ const Menu: React.FunctionComponent<MenuTypes> = ({
 type SelectTypes = {
   label?: any
   isCreatable?: any
-  options?: any
+  options?: any[any]
   isClearable?: any
   isMulti?: any
   isSearchable?: any
@@ -92,6 +92,7 @@ type SelectTypes = {
   fullWidth?: any
   value?: any
   children?: any
+  getOptionLabel?: any
 }
 export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
   return (
@@ -115,6 +116,7 @@ export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
             Option,
             Menu,
           }}
+          getOptionLabel={props.getOptionLabel}
         />
       )}
       {props.isCreatable && (

package/src/elements/HawaSwitch.tsx

@@ -17,9 +17,11 @@ export const HawaSwitch: React.FunctionComponent<SwitchTypes> = (props) => {
         className="peer sr-only"
       />
       <div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></div>
-      <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
-        {props.text}
-      </span>
+      {props.text && (
+        <span className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {props.text}
+        </span>
+      )}
     </label>
   )
 }

package/src/elements/HawaTable.tsx

@@ -1,18 +1,29 @@
 import React from "react"
 import { HawaButton } from "./HawaButton"
-
+import { FaTrash, FaExclamationCircle, FaPen } from "react-icons/fa"
+import clsx from "clsx"
+// import { HiOutlineEye } from "react-icons/hi2"
 type TableTypes = {
   lang?: any
-  columns?: any
+  columns: any[string]
   actions?: any
-  rows?: any
+  rows?: any[any]
   noDataText?: any
   handleActionClick?: any
   end?: any
+  size?: "normal" | "small"
 }
 
-export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
+export const HawaTable: React.FunctionComponent<TableTypes> = ({
+  size = "normal",
+  ...props
+}) => {
   let isArabic = props.lang === "ar"
+
+  let sizeStyles = {
+    normal: "py-3 px-6",
+    small: "px-3 py-1",
+  }
   return (
     <>
       <div>
@@ -21,15 +32,15 @@ export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
             <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
               <tr>
                 {props.columns.map((col: any, i: any) => (
-                  <th key={i} scope="col" className="py-3 px-6">
+                  <th key={i} scope="col" className={clsx(sizeStyles[size])}>
                     {col}
                   </th>
                 ))}
-                {props.actions && (
-                  <th scope="col" className="py-3 px-6">
+                {props.actions && size !== "small" ? (
+                  <th scope="col" className={clsx(sizeStyles[size])}>
                     actions
                   </th>
-                )}
+                ) : null}
               </tr>
             </thead>
             <tbody>
@@ -44,30 +55,30 @@ export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
                         return (
                           <th
                             scope="row"
-                            className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
+                            className={clsx(
+                              sizeStyles[size],
+                              "whitespace-nowrap font-medium text-gray-900 dark:text-white"
+                            )}
                           >
                             {r}{" "}
                           </th>
                         )
                       } else {
-                        return <td className="py-4 px-6">{r}</td>
+                        return <td className={clsx(sizeStyles[size])}>{r}</td>
                       }
                     })}
-                    {props.actions && (
+                    {props.actions && size !== "small" ? (
                       <td
                         align={isArabic ? "right" : "left"}
                         style={{ fontWeight: 700 }}
+                        className="flex flex-row gap-1"
                         // variant={isArabic ? "borderedRight" : "borderedLeft"}
                       >
-                        {props.actions.map((act: any) => (
-                          <HawaButton
-                            onClick={() => props.handleActionClick(singleRow)}
-                          >
-                            {act}
-                          </HawaButton>
-                        ))}
+                        {props.actions.map((act: any) => {
+                          return <TableActionButton action={act} />
+                        })}
                       </td>
-                    )}
+                    ) : null}
                   </tr>
                 ))
               ) : (
@@ -192,3 +203,27 @@ export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
     </>
   )
 }
+
+const TableActionButton = (props) => {
+  let smallAct = props.action.toLowerCase()
+  return (
+    <HawaButton
+      size="noPadding"
+      variant="outlined"
+      tooltip={props.action}
+      onClick={() => props.handleActionClick(smallAct)}
+    >
+      <div className="w-full rounded-lg p-1.5">
+        {smallAct === "delete" ? (
+          <FaTrash />
+        ) : smallAct === "view" ? (
+          <FaExclamationCircle />
+        ) : smallAct === "edit" ? (
+          <FaPen />
+        ) : (
+          props.action
+        )}
+      </div>
+    </HawaButton>
+  )
+}