@sikka/hawa 0.0.265 → 0.0.267

package/lib/layout/Banner.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+type BannerTypes = {
+    showBanner?: boolean;
+    direction?: "rtl" | "ltr";
+    logoURL?: string;
+    title?: string;
+    text?: string;
+    actionText?: string;
+    onActionClick?: () => void;
+    position?: "top" | "bottom";
+    design: "default" | "floating";
+};
+export declare const HawaBanner: FC<BannerTypes>;
+export {};

package/lib/layout/HawaAppLayoutSimplified.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 type HawaAppLayoutTypes = {
+    /** The pages of the side drawer */
     drawerItems: {
         label: string;
         icon: any;
@@ -20,6 +21,7 @@ type HawaAppLayoutTypes = {
     drawerSize?: "sm" | "md" | "large";
     profileMenuItems?: MenuItems[][];
     onSettingsClick?: () => void;
+    DrawerFooterActions: any;
 };
 type MenuItems = {
     icon?: JSX.Element;

package/lib/layout/index.d.ts

@@ -6,3 +6,4 @@ export * from "./HawaAppLayoutSimplified";
 export * from "./HawaContainer";
 export * from "./AppSidebar";
 export * from "./Footer";
+export * from "./Banner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.265",
+  "version": "0.0.267",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Misc/EmptyState.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
-import { FaCheck } from "react-icons/fa"
 
 type TEmptyState = {
   variant?: "outlined" | "contained" | "neobrutalism"
@@ -21,7 +20,17 @@ export const EmptyState: FC<TEmptyState> = ({
     <HawaContainer variant={variant} centered={true} maxWidth="small">
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
         <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
-          <FaCheck size={20} color="white" />
+          <svg
+            stroke="currentColor"
+            fill="white"
+            stroke-width="0"
+            viewBox="0 0 512 512"
+            height="0.35em"
+            width="0.35em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+          </svg>
         </div>
         <div className="m-2 text-xl font-bold">
           {texts?.youreCaughtUp ?? "You're all caught up"}

package/src/blocks/Misc/NoPermission.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from "react"
 import { HawaContainer } from "../../layout"
-import { FaLock } from "react-icons/fa"
 
 type TNoPermission = {
   variant?: "outlined" | "contained" | "neobrutalism"
@@ -18,7 +17,17 @@ export const NoPermission: FC<TNoPermission> = ({
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
         <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
-          <FaLock size={20} color="white" />
+          <svg
+            stroke="currentColor"
+            fill="white"
+            stroke-width="0"
+            viewBox="0 0 448 512"
+            height="0.35em"
+            width="0.35em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path>
+          </svg>
         </div>
         <div className="m-2 text-xl font-bold">
           {texts?.title ?? "You don't have permission"}

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,4 @@
 import React, { useState, FC } from "react"
-import { BsExclamationCircleFill } from "react-icons/bs"
 import { HawaTabs, HawaTooltip } from "../../elements"
 
 const CheckMark = () => (
@@ -131,7 +130,17 @@ export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
                       position="top-right"
                       content={feature.description}
                     >
-                      <BsExclamationCircleFill />
+                      <svg
+                        stroke="currentColor"
+                        fill="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 16 16"
+                        height="1em"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path>
+                      </svg>
                     </HawaTooltip>
                   )}
                 </div>

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react"
-import { FaClone } from "react-icons/fa"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -24,7 +23,17 @@ export const ReferralAccount: FC<ReferralAccount> = ({
             onClick={() => navigator.clipboard.writeText(referralCode)}
           >
             <span className="bg-red flex items-center justify-center">
-              <FaClone />
+              <svg
+                stroke="currentColor"
+                fill="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
+              </svg>{" "}
             </span>
           </HawaButton>
         </div>
@@ -38,7 +47,17 @@ export const ReferralAccount: FC<ReferralAccount> = ({
             onClick={() => navigator.clipboard.writeText(referralLink)}
           >
             <span className="bg-red flex items-center justify-center">
-              <FaClone />
+              <svg
+                stroke="currentColor"
+                fill="currentColor"
+                stroke-width="0"
+                viewBox="0 0 512 512"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z"></path>
+              </svg>{" "}
             </span>
           </HawaButton>
         </div>

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from "react"
-import { FaTimes } from "react-icons/fa"
 import {
   HawaAlert,
   HawaButton,
@@ -109,8 +108,21 @@ const SettlementAccountCard = (props) => (
       )}
       {/* {props.default && <HawaChip size="normal" label="Default" />} */}
       {!props.default && <HawaButton size="small">Make Default</HawaButton>}
-      <HawaButton tooltip="Delete">
-        <FaTimes />
+      <HawaButton tooltip="Delete" size="small">
+        {/* <FaTimes /> */}
+        <svg
+          aria-hidden="true"
+          className="h-5 w-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="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"
+            clipRule="evenodd"
+          ></path>
+        </svg>
       </HawaButton>
     </div>
   </div>

package/src/elements/DragDropImages.tsx

@@ -2,9 +2,10 @@ import React, { useEffect, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
-import { TbDragDrop } from "react-icons/tb"
 import clsx from "clsx"
+
 //TODO: This element needs more improvements and testing
+
 type DragDropImagesTypes = {
   /**  The text label above the component. Consistant with the other form input fields   */
   label?: string
@@ -26,6 +27,8 @@ type DragDropImagesTypes = {
     maxFileSize: any
     tooManyFiles: any
     fileTooLarge: any
+    acceptedFileTypes: any
+    invalidFileType: any
   }
 }
 
@@ -46,7 +49,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
 }) => {
   const [cmp, setCmp] = useState(0)
   const [max, setMax] = useState<any>(0)
-  //const [thumbs, setThumbs] = useState("");
+
   const {
     getRootProps,
     getInputProps,
@@ -84,6 +87,12 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     acceptedFiles.splice(0, acceptedFiles.length)
     setFiles([])
   }
+
+  const clearAllFiles = () => {
+    acceptedFiles.length = 0
+    setFiles([])
+  }
+
   useEffect(() => {
     if (maxSize > 0) {
       const k = 1024
@@ -96,16 +105,44 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
     }
   }, [maxSize])
   const errs = fileRejections.map((rej, i) => {
-    return (
-      <HawaAlert
-        text={rej.file.name}
-        title={rej.errors[0].code}
-        severity="error"
-      />
-    )
+    switch (rej.errors[0].code) {
+      case "file-too-large":
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={texts.fileTooLarge}
+            severity="error"
+          />
+        )
+      case "too-many-files":
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={texts.tooManyFiles}
+            severity="error"
+          />
+        )
+      case "file-invalid-type":
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={texts.invalidFileType}
+            severity="error"
+          />
+        )
+
+      default:
+        return (
+          <HawaAlert
+            text={rej.file.name}
+            title={rej.errors[0].code}
+            severity="error"
+          />
+        )
+    }
   })
   const thumbs = files?.map((file: any, index: any) => (
-    <div className="relative m-3 rounded  ">
+    <div className="relative rounded">
       <button
         onClick={(e) => {
           e.stopPropagation()
@@ -114,7 +151,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           onDeleteFile(file)
         }}
         type="button"
-        className="absolute left-0 ml-auto inline-flex items-center rounded rounded-bl-none rounded-tr-none bg-gray-900 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"
+        className="absolute left-0 ml-auto inline-flex items-center rounded-inner rounded-bl-none rounded-tr-none bg-gray-900 p-1.5 text-sm text-gray-400 transition-all hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
         data-modal-toggle="defaultModal"
       >
         <svg
@@ -160,63 +197,56 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
         </div>
       )}
       <div
-        {...getRootProps({})}
         className={clsx(
           "flex flex-col justify-center rounded border border-dashed border-black  transition-all hover:bg-gray-100 ",
           isDragActive ? "bg-layoutPrimary-500" : "bg-white"
         )}
       >
-        <input {...getInputProps()} />
-        <div className="flex flex-col items-center justify-center gap-2 pt-4 text-center">
-          <TbDragDrop size={22} />
-          {<texts.clickHereToUpload />}
-        </div>
-        <div className="py-4 text-center text-xs">
-          {texts.maxFileSize} {max}
-        </div>
-        <div className="flex justify-center ">
-          {acceptedFiles.length > 0 && (
-            <HawaButton
-              onClick={(e) => {
-                e.stopPropagation()
-                onClearFiles(acceptedFiles)
-              }}
+        <div {...getRootProps({})}>
+          <p {...getInputProps()} />
+          <div className="flex flex-col items-center justify-center gap-2 pt-4 text-center">
+            <svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              height="1.5em"
+              width="1.5em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              Clear All
-            </HawaButton>
-          )}
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M19 11v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
+              <path d="M13 13l9 3l-4 2l-2 4l-3 -9"></path>
+              <path d="M3 3l0 .01"></path>
+              <path d="M7 3l0 .01"></path>
+              <path d="M11 3l0 .01"></path>
+              <path d="M15 3l0 .01"></path>
+              <path d="M3 7l0 .01"></path>
+              <path d="M3 11l0 .01"></path>
+              <path d="M3 15l0 .01"></path>
+            </svg>
+            {<texts.clickHereToUpload />}
+          </div>
+          <div className="pt-2 text-center text-xs">
+            {texts.acceptedFileTypes} {accept.split(",")}
+          </div>
+          <div className="pb-2 pt-1 text-center text-xs">
+            {texts.maxFileSize} {max}
+          </div>
         </div>
-        {thumbs && showPreview ? (
-          <aside
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              flexWrap: "wrap",
-              // marginTop: 10,
-            }}
-            className="rounded-lg border-red-500"
-          >
+        {acceptedFiles.length > 0 && (
+          <div className="flex justify-center rounded-lg  p-2 ">
+            <HawaButton onClick={clearAllFiles}>Clear All</HawaButton>
+          </div>
+        )}
+        {acceptedFiles.length > 0 && thumbs && showPreview ? (
+          <aside className="flex flex-row flex-wrap justify-center  gap-2 rounded-lg  p-2">
             {thumbs}
           </aside>
         ) : null}
-        <div className="px-4">
-          {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-            <HawaAlert
-              title={texts.errorUploading}
-              text={texts.tooManyFiles}
-              severity="error"
-            />
-          ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
-            <HawaAlert
-              title={texts.errorUploading}
-              text={texts.fileTooLarge}
-              severity="error"
-            />
-          ) : (
-            errs
-          )}
-        </div>
-        {}
+        <div className="px-4">{fileRejections[0]?.errors[0]?.code && errs}</div>
       </div>
     </div>
   )

package/src/elements/HawaAlert.tsx

@@ -10,7 +10,6 @@ type AlertTypes = {
   text: any
   /** The duration for the alert to stay on the screen */
   duration?: number
-  // hideIcon?: any //TODO: an X button to delete the alert
   variant?:
     | "normal"
     | "solid"
@@ -26,11 +25,14 @@ type AlertTypes = {
       variant: "contained" | "outlined"
     }
   ]
+  persistant?: boolean
+  icon?: any
 }
 export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   variant = "normal",
   direction = "ltr",
   duration,
+  icon,
   ...props
 }) => {
   const alertRef = useRef(null)
@@ -55,6 +57,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
     }
   }, [duration])
   let closeButtonStyle = {
+    none: "hover:bg-gray-300",
     info: "hover:bg-blue-300",
     warning: "hover:bg-yellow-300",
     error: "hover:bg-red-300",
@@ -62,6 +65,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   }
   let styleVariant = {
     normal: {
+      none: "text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -70,6 +74,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "top-accent": {
+      none: "border-t-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-t-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-t-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -79,6 +84,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "border-t-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "left-accent": {
+      none: "border-l-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-l-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-l-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -88,6 +94,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "border-l-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "right-accent": {
+      none: "border-r-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-r-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-r-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -97,6 +104,7 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         "border-r-4 border-green-300  text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
     },
     "bottom-accent": {
+      none: "border-b-4 border-gray-300 text-gray-700 bg-gray-100 dark:bg-gray-200 dark:text-gray-800",
       info: "border-b-4 border-blue-300 text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
       warning:
         "border-b-4 border-yellow-300  text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
@@ -117,58 +125,71 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
         role="alert"
         dir={direction}
       >
-        <span
-          className={clsx("font-medium", direction === "rtl" ? "ml-8" : "mr-8")}
-        >
-          {props.title}
-        </span>
-        <span>{" " + props.text}</span>
-
-        {props.actions && (
-          <div className="mt-2 flex flex-row gap-2">
-            {props.actions.map((act, index) => (
-              <HawaButton
-                key={index}
-                variant={act.variant}
-                onClick={act.onClick()}
-                margins="none"
-              >
-                {act.label}
-              </HawaButton>
-            ))}
-          </div>
-        )}
-        <button
-          type="button"
-          className={clsx(
-            "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
-            closeButtonStyle[props.severity],
-            direction === "rtl" ? "left-2" : "right-2"
+        <div className="flex flex-row">
+          {icon && (
+            <div className={direction === "rtl" ? "pl-2 pt-1" : "pr-2 pt-1"}>
+              {icon}
+            </div>
           )}
-          data-dismiss-target="#alert-default"
-          aria-label="Close"
-          onClick={() => {
-            setClosed(true)
-            setTimeout(() => {
-              alertRef.current.removeChild(alertRef.current.children[0])
-            }, 200)
-          }}
-        >
-          <span className="sr-only">Close</span>
-          <svg
-            aria-hidden="true"
-            className="h-5 w-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
+          <div className="flex flex-col">
+            <span
+              className={clsx(
+                "font-medium",
+                direction === "rtl" ? "ml-8" : "mr-8"
+              )}
+            >
+              {props.title}
+            </span>
+            <span>{" " + props.text}</span>
+            {props.actions && (
+              <div className="mt-2 flex flex-row gap-2">
+                {props.actions.map((act, index) => (
+                  <HawaButton
+                    key={index}
+                    variant={act.variant}
+                    onClick={act.onClick()}
+                    margins="none"
+                  >
+                    {act.label}
+                  </HawaButton>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        {!props.persistant && (
+          <button
+            type="button"
+            className={clsx(
+              "absolute  top-2 inline-flex h-9 w-9 items-center justify-center rounded-inner p-1.5 text-gray-400 transition-all  hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
+              closeButtonStyle[props.severity],
+              direction === "rtl" ? "left-2" : "right-2"
+            )}
+            data-dismiss-target="#alert-default"
+            aria-label="Close"
+            onClick={() => {
+              setClosed(true)
+              setTimeout(() => {
+                alertRef.current.removeChild(alertRef.current.children[0])
+              }, 200)
+            }}
           >
-            <path
-              fillRule="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"
-              clipRule="evenodd"
-            ></path>
-          </svg>
-        </button>
+            <span className="sr-only">Close</span>
+            <svg
+              aria-hidden="true"
+              className="h-5 w-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="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"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        )}
       </div>
     </div>
   )