@sikka/hawa 0.0.135 → 0.0.137

package/package.json

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

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -10,9 +10,9 @@ const CheckMark = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
+      fillRule="evenodd"
       d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-      clip-rule="evenodd"
+      clipRule="evenodd"
     ></path>
   </svg>
 )
@@ -26,9 +26,9 @@ const UncheckMark = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
+      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"
-      clip-rule="evenodd"
+      clipRule="evenodd"
     ></path>
   </svg>
 )

package/src/elements/DragDropImages.tsx

@@ -124,9 +124,9 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              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"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
           <span className="sr-only">Close modal</span>
@@ -157,7 +157,7 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       <div
         // variant="drop-area"
         {...getRootProps({
-          style: {backgroundColor : isDragActive ?  "white" : "inherit" }
+          style: { backgroundColor: isDragActive ? "white" : "inherit" },
         })}
         // style={{ backgroundColor: isDragActive ? "white" : "inherit" }}
         className="flex flex-col justify-center rounded-xl border border-dashed border-black"

package/src/elements/HawaAccordian.tsx

@@ -38,15 +38,17 @@ const AccordionItem: React.FunctionComponent<AccordionItemTypes> = (props) => {
           <span>{props.title}</span>
           <svg
             data-accordion-icon=""
-            className={`h-6 w-6 ${collapse ? "" : "rotate-180"}  shrink-0 transition-all`}
+            className={`h-6 w-6 ${
+              collapse ? "" : "rotate-180"
+            }  shrink-0 transition-all`}
             fill="currentColor"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              fillRule="evenodd"
               d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </button>

package/src/elements/HawaDrawer.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactElement, ReactNode, useEffect, useState } from "react"
-import { FaDailymotion } from "react-icons/fa"
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 import clsx from "clsx"
 
 type TDrawerTypes = {
@@ -8,6 +8,9 @@ type TDrawerTypes = {
   position: any
   heading: any
   children?: ReactNode
+  drawerHeader?: any
+  drawerBody?: any
+  drawerFooter?: any
 }
 
 export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
@@ -19,55 +22,49 @@ export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
   ...props
 }) => {
   const leftDrawer =
-    "w-60 z-50 h-full absolute overflow-x-hidden top-0 left-0 border-r bg-white"
+    "w-60 z-50 h-full absolute overflow-x-clip top-0 left-0 border-r bg-white"
   const rightDrawer =
-    "w-60 z-50 h-full absolute overflow-x-hidden top-0 right-0 border-l bg-white"
+    "w-60 z-50 h-full absolute overflow-x-clip top-0 right-0 border-l bg-white"
 
-  const isFunction = (data: any): data is (...args: any[]) => any =>
-    typeof data === "function"
-  //   useEffect(() => {
-  //     setOpenDrawer(true);
-  //   }, [open]);
-
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && isFunction(child.type)) {
-      switch (child.type.name) {
-        case "DrawerHeader":
-          return (
-            <DrawerHeader setOpen={setOpen} children={child.props.children} />
-          )
-
-        case "DrawerBody":
-          return <DrawerBody children={child.props.children} />
-
-        case "DrawerFooter":
-          return <DrawerFooter children={child.props.children} />
-      }
-      return React.cloneElement(child, {
-        // setOpen: setOpen,
-        // children: child.props.children,
-      })
-    }
-  })
-
-  const drawerClass =
-    open && position == "left"
-      ? clsx("block", leftDrawer)
-      : open && position == "right"
-      ? clsx("block", rightDrawer)
-      : "hidden"
+  return (
+    <div
+      className={clsx(
+        position == "left" ? leftDrawer : rightDrawer,
+        position == "left" ? "flex-row-reverse" : "flex-row",
+        "overflow-x-clip transition-all",
+        open ? "w-60" : "w-0"
+      )}
+    >
+      {props.drawerHeader && (
+        <DrawerHeader direction={position} setOpen={setOpen}>
+          {props.drawerHeader}
+        </DrawerHeader>
+      )}
 
-  return <div className={drawerClass}>{childrenWithProps}</div>
+      {props.drawerBody && (
+        <DrawerBody direction={position}>{props.drawerBody}</DrawerBody>
+      )}
+      {props.drawerFooter && (
+        <DrawerFooter direction={position}>{props.drawerFooter}</DrawerFooter>
+      )}
+    </div>
+  )
 }
 
 type TDrawerHeader = {
   setOpen: any
   children: ReactElement
+  direction: any
 }
 
-export const DrawerHeader: FC<TDrawerHeader> = (props) => {
+const DrawerHeader: FC<TDrawerHeader> = (props) => {
   return (
-    <div className="  flex w-full flex-row items-center justify-between border-b py-4 px-1">
+    <div
+      className={clsx(
+        "flex w-full flex-row items-center justify-between border-b p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse"
+      )}
+    >
       {props.children}
       <div
         className="justify-self-end rounded border p-1 hover:cursor-pointer"
@@ -76,7 +73,11 @@ export const DrawerHeader: FC<TDrawerHeader> = (props) => {
           props.setOpen(false)
         }}
       >
-        <FaDailymotion size={20} strokeWidth={2} />
+        {props.direction == "left" ? (
+          <FaChevronLeft size={20} strokeWidth={2} />
+        ) : (
+          <FaChevronRight size={20} strokeWidth={2} />
+        )}
       </div>
     </div>
   )
@@ -84,19 +85,34 @@ export const DrawerHeader: FC<TDrawerHeader> = (props) => {
 
 type TDrawerBody = {
   children: ReactElement
+  direction: any
 }
-
-export const DrawerBody = (props: TDrawerBody) => {
-  return <div className="p-1">{props.children}</div>
+const DrawerBody = (props: TDrawerBody) => {
+  return (
+    <div
+      className={clsx(
+        "overflow-clip whitespace-nowrap p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
+      )}
+    >
+      {props.children}
+    </div>
+  )
 }
 
 type TDrawerFooter = {
   children: ReactElement
+  direction: any
 }
 
-export const DrawerFooter = (props: TDrawerFooter) => {
+const DrawerFooter = (props: TDrawerFooter) => {
   return (
-    <div className="absolute bottom-0 w-full border-t py-4 px-1">
+    <div
+      className={clsx(
+        "absolute bottom-0 w-full whitespace-nowrap border-t p-4",
+        props.direction == "left" ? "flex-row" : "flex-row-reverse text-right"
+      )}
+    >
       {props.children}
     </div>
   )

package/src/elements/HawaModal.tsx

@@ -65,9 +65,9 @@ export const HawaModal: React.FunctionComponent<ModalTypes> = ({
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
+                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"
-                clip-rule="evenodd"
+                clipRule="evenodd"
               ></path>
             </svg>
             <span className="sr-only">Close modal</span>

package/src/elements/HawaPricingCard.tsx

@@ -107,9 +107,9 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
               >
                 <title>Check icon</title>
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 ></path>
               </svg>
               <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
@@ -118,26 +118,6 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
             </li>
           )
         })}
-
-        {/* <li className="flex space-x-3 line-through decoration-gray-500">
-            <svg
-              aria-hidden="true"
-              className="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>Check icon</title>
-              <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            <span className="text-base font-normal leading-tight text-gray-500">
-              Sketch Files
-            </span>
-          </li> */}
       </ul>
       <button
         type="button"

package/src/elements/HawaSnackbar.tsx

@@ -1,11 +1,13 @@
 import clsx from "clsx"
-import React, { FC } from "react"
+import React, { FC, useEffect, useRef, useState } from "react"
 import { HawaButton } from "./HawaButton"
 
 type THawaSnackBar = {
   severity: "info" | "warning" | "error" | "success" | "none"
   title: string
   description: string
+  handleClose?: () => void
+  duration?: number
   position?:
     | "top-left"
     | "top-center"
@@ -28,6 +30,8 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
   severity = "info",
   position = "bottom-left",
   actions,
+  handleClose,
+  duration,
 }) => {
   let defaultStyle =
     "fixed flex flex-row items-top p-1 w-full max-w-xs rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
@@ -46,50 +50,81 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
     "bottom-right": "bottom-4 right-4",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
   }
+
+  const [closed, setClosed] = useState(false)
+  const toastRef = useRef(null)
+  useEffect(() => {
+    if (duration) {
+      //To change opacity and hide the component
+      const timeoutHide = setTimeout(() => {
+        setClosed(true)
+      }, duration)
+      //To destroy the component after hiding it
+      const timeoutDestroy = setTimeout(() => {
+        setClosed(true)
+        toastRef.current.removeChild(toastRef.current.children[0])
+      }, duration + 1000)
+
+      return () => {
+        clearTimeout(timeoutHide)
+        clearTimeout(timeoutDestroy)
+      }
+    }
+  }, [duration])
+
   return (
-    <div
-      id="toast-default"
-      role="alert"
-      className={clsx(defaultStyle, severities[severity], positions[position])}
-    >
-      <div className="p-3">
-        <div className="text-sm font-bold">{title}</div>
-        <div className="text-sm font-normal">{description}</div>
-        {actions && (
-          <div className="mt-2 flex flex-row gap-2">
-            {actions.map((act) => (
-              <HawaButton
-                variant={act.variant}
-                onClick={act.onClick()}
-                margins="none"
-              >
-                {act.label}
-              </HawaButton>
-            ))}
-          </div>
+    <div ref={toastRef}>
+      <div
+        id="toast-default"
+        role="alert"
+        className={clsx(
+          defaultStyle,
+          severities[severity],
+          positions[position],
+          "p-2 transition-all",
+          closed ? "opacity-0" : "opacity-100"
         )}
-      </div>
-      <button
-        type="button"
-        className="inline-flex h-8 w-8 rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 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"
-        data-dismiss-target="#toast-default"
-        aria-label="Close"
       >
-        <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="p-3">
+          <div className="text-sm font-bold">{title}</div>
+          <div className="text-sm font-normal">{description}</div>
+          {actions && (
+            <div className="mt-2 flex flex-row gap-2">
+              {actions.map((act) => (
+                <HawaButton
+                  variant={act.variant}
+                  onClick={act.onClick()}
+                  margins="none"
+                >
+                  {act.label}
+                </HawaButton>
+              ))}
+            </div>
+          )}
+        </div>
+        <button
+          type="button"
+          className="inline-flex h-8 w-8 rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 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"
+          data-dismiss-target="#toast-default"
+          aria-label="Close"
+          onClick={() => setClosed(true)}
         >
-          <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>
-      </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>
   )
 }

package/src/elements/index.ts

@@ -15,18 +15,17 @@ export * from "./HawaAccordian"
 export * from "./DragDropImages"
 export * from "./DraggableCard"
 export * from "./HawaPhoneInput"
-export * from "./HawaDrawerItem"
 export * from "./HawaTooltip"
 export * from "./HawaTabs"
 export * from "./HawaModal"
 export * from "./HawaMenu"
-export * from "./HawaDrawer"
 export * from "./HawaCopyrights"
 export * from "./HawaTimeline"
 export * from "./Breadcrumb"
 export * from "./HawaStats"
 export * from "./HawaSpinner"
 export * from "./HawaRadio"
+export * from "./HawaDrawer"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react"
+
+const useBreakpoint = () => {
+  const [breakpoint, setBreakpoint] = useState(1200)
+  const resize = () => {
+    setBreakpoint(window.innerWidth)
+  }
+
+  useEffect(() => {
+    window.addEventListener("resize", resize)
+
+    return () => {
+      window.removeEventListener("resize", resize)
+    }
+  }, [])
+
+  return breakpoint
+}
+
+export default useBreakpoint

package/src/hooks/useDiscloser.ts

@@ -1,17 +1,14 @@
 import { useState } from "react"
 
-
 type TUseDiscloser = {
-    isOpen : boolean,
-    onOpen : () => void,
-    onClose : () => void
+  isOpen: boolean
+  onOpen: () => void
+  onClose: () => void
 }
 
-const useDiscloser = (value: boolean = false) : TUseDiscloser => {
+const useDiscloser = (value: boolean = false): TUseDiscloser => {
   const [open, setOpen] = useState<boolean>(value)
-
   const onOpen = () => setOpen(true)
-
   const onClose = () => setOpen(false)
 
   return {
@@ -21,5 +18,4 @@ const useDiscloser = (value: boolean = false) : TUseDiscloser => {
   }
 }
 
-
-export default useDiscloser;
+export default useDiscloser

package/src/layout/HawaAppLayout.tsx

@@ -57,9 +57,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 ></path>
               </svg>
             </div>
@@ -124,7 +124,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
           // "overflow-scroll",
           "w-[calc(100%-3rem)]",
           "translate-x-[3rem]",
-          "bg-red-900 text-white",
+          // "bg-red-900 text-white",
           "m-0",
           props.topBar ? "mt-14" : ""
         )}

package/src/layout/HawaSiteLayout.tsx

@@ -1,6 +1,5 @@
 import clsx from "clsx"
 import React, { useState } from "react"
-import HawaDrawerItem from "../elements/HawaDrawerItem"
 
 const MenuButton = ({ handleClick }) => {
   return (
@@ -21,9 +20,9 @@ const MenuButton = ({ handleClick }) => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
+          fillRule="evenodd"
           d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         ></path>
       </svg>
     </button>
@@ -86,9 +85,7 @@ const DrawerContent = (props: any) => {
       <div className="overflow-y-auto py-4">
         <ul className="space-y-2">
           {props.drawerItems.map((item: any, i: any) => {
-            return (
-              <HawaDrawerItem action={item.action} key={i} text={item.text} />
-            )
+            return <div>{item.text}</div>
           })}
         </ul>
       </div>
@@ -124,9 +121,9 @@ const CloseButton = () => {
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          fill-rule="evenodd"
+          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"
-          clip-rule="evenodd"
+          clipRule="evenodd"
         ></path>
       </svg>
     </button>
@@ -159,9 +156,9 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                clip-rule="evenodd"
+                clipRule="evenodd"
               ></path>
             </svg>
           </div>
@@ -186,9 +183,9 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 ></path>
               </svg>
             </button>{" "}
@@ -230,18 +227,16 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              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"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </button>{" "}
         <div className="overflow-y-auto py-4">
           <ul className="space-y-2">
             {props.drawerItems.map((item: any, i: any) => {
-              return (
-                <HawaDrawerItem action={item.action} key={i} text={item.text} />
-              )
+              return <div>{item.text}</div>
             })}
           </ul>
         </div>
@@ -266,9 +261,9 @@ const AppLayoutNav = (props) => (
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            fill-rule="evenodd"
+            fillRule="evenodd"
             d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-            clip-rule="evenodd"
+            clipRule="evenodd"
           ></path>
         </svg>
       </div>
@@ -290,9 +285,9 @@ const AppLayoutNav = (props) => (
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill-rule="evenodd"
+              fillRule="evenodd"
               d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-              clip-rule="evenodd"
+              clipRule="evenodd"
             ></path>
           </svg>
         </button>{" "}