@sikka/hawa 0.0.264 → 0.0.266

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.264",
+  "version": "0.0.266",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -11,6 +11,7 @@
     "kit",
     "saas",
     "kit",
+    "tailwind",
     "hawa"
   ],
   "repository": {

package/src/elements/HawaAlert.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
+import { FiAlertCircle } from "react-icons/fi"
 
 type AlertTypes = {
   severity: "info" | "warning" | "error" | "success"
@@ -10,7 +11,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 +26,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 +58,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 +66,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 +75,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 +85,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 +95,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 +105,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 +126,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>
   )

package/src/elements/HawaButton.tsx

@@ -1,12 +1,13 @@
-import React, { FC, ButtonHTMLAttributes } from "react"
+import React, { FC, ButtonHTMLAttributes, useState } from "react"
 import clsx from "clsx"
 import { HawaSpinner } from "./HawaSpinner"
 import { HawaTooltip } from "./HawaTooltip"
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "contained" | "outlined"
+  feedback?: string
   tooltipDirection?: "rtl" | "ltr"
-  color?: "default" | "primary" | "secondary"
+  color?: "default" | "primary" | "secondary" | "light" | "dark"
   width?: "full" | "normal" | "half"
   size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full"
   margins?: "none" | "1" | "2" | "3" | "4"
@@ -25,6 +26,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   endIcon?: any
   isLoading?: boolean
   badge?: any
+  edgeCorner?: any
 }
 
 const disabledSyles = "cursor-default pointer-events-none"
@@ -32,6 +34,51 @@ const disabledVariantSyles = {
   contained: "text-gray-300 bg-gray-100",
   outlined: "text-gray-300 border-gray-300",
 }
+const baseStyles =
+  "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium transition-all"
+const sizeStyles = {
+  xs: "px-1 py-1",
+  small: "text-xs px-2.5 py-1.5",
+  medium: "text-sm leading-4 px-3 py-2",
+  large: "text-sm px-4 py-2",
+  noPadding: "p-0",
+  full: "h-full max-h-full p-2",
+}
+const widthStyles = {
+  full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
+  half: "w-full text-center flex items-center justify-center h-full",
+  normal:
+    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
+}
+const containerWidthStyles = {
+  full: "w-full flex justify-center text-center inline-flex items-center",
+  half: "w-1/2",
+  normal: "w-fit",
+}
+const variantStyles = {
+  contained: "border-transparent",
+  outlined: "bg-transparent border",
+}
+const colorStyles = {
+  contained: {
+    default:
+      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
+    primary:
+      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
+    secondary:
+      "bg-buttonSecondary-500 hover:text-white hover:bg-buttonSecondary-700",
+    gray: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
+    dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
+  },
+  outlined: {
+    default: "text-gray-600 border-gray-600 hover:bg-gray-200",
+    primary: "text-black hover:bg-gray-50",
+    secondary:
+      "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
+    gray: "border-gray-300 hover:bg-gray-200  ",
+    dark: "border-gray-900 hover:bg-gray-700  ",
+  },
+}
 
 export const HawaButton: FC<ButtonProps> = ({
   className,
@@ -48,51 +95,30 @@ export const HawaButton: FC<ButtonProps> = ({
   margins = "2",
   children,
   badge,
+  edgeCorner = false,
+  feedback,
   ...props
 }) => {
-  const baseStyles =
-    "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium rounded transition-all"
-
-  const sizeStyles = {
-    xs: "px-1 py-1",
-    small: "text-xs px-2.5 py-1.5",
-    medium: "text-sm leading-4 px-3 py-2",
-    large: "text-sm px-4 py-2",
-    noPadding: "p-0",
-    full: "h-full max-h-full p-2",
-  }
+  const [isClicked, setIsClicked] = useState(false)
+  const [buttonText, setButtonText] = useState(children)
 
-  const widthStyles = {
-    full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
-    half: "w-full text-center flex items-center justify-center h-full",
-    normal:
-      "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
-  }
-  const containerWidthStyles = {
-    full: "w-full flex justify-center text-center inline-flex items-center",
-    half: "w-1/2",
-    normal: "w-fit",
-  }
-  const variantStyles = {
-    contained: "border-transparent",
-    outlined: "bg-transparent border",
-  }
-
-  const colorStyles = {
-    contained: {
-      default:
-        "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
-      primary:
-        "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
-      secondary:
-        "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
-    },
-    outlined: {
-      default: "text-gray-600 border-gray-600 hover:bg-gray-200",
-      primary: "text-black hover:bg-gray-50",
-      secondary:
-        "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
-    },
+  const handleClick = () => {
+    if (feedback) {
+      if (!isClicked) {
+        props.onClick
+        setButtonText(feedback)
+        setIsClicked(true)
+        console.log("hawa button clicked")
+        // Reset the button text after 2 seconds (adjust the time as needed).
+        setTimeout(() => {
+          setButtonText(children)
+          setIsClicked(false)
+        }, 2000)
+      }
+    } else {
+      props.onClick(null)
+      console.log("hawa button clicked")
+    }
   }
 
   return (
@@ -116,6 +142,8 @@ export const HawaButton: FC<ButtonProps> = ({
                 ? clsx(
                     className,
                     baseStyles,
+                    edgeCorner ? "rounded-inner" : "rounded",
+
                     variantStyles[variant],
                     sizeStyles[size],
                     widthStyles[width],
@@ -125,6 +153,8 @@ export const HawaButton: FC<ButtonProps> = ({
                 : clsx(
                     className,
                     baseStyles,
+                    edgeCorner ? "rounded-inner" : "rounded",
+
                     variantStyles[variant],
                     sizeStyles[size],
                     colorStyles[variant][color],
@@ -133,6 +163,7 @@ export const HawaButton: FC<ButtonProps> = ({
             }
             disabled={disabled}
             onClick={props.onClick}
+            // onClick={handleClick}
           >
             {!isLoading ? children : <HawaSpinner size="button" />}
           </button>
@@ -144,6 +175,8 @@ export const HawaButton: FC<ButtonProps> = ({
               ? clsx(
                   className,
                   baseStyles,
+                  edgeCorner ? "rounded-inner" : "rounded",
+
                   variantStyles[variant],
                   sizeStyles[size],
                   widthStyles[width],
@@ -152,7 +185,9 @@ export const HawaButton: FC<ButtonProps> = ({
                 )
               : clsx(
                   className,
+                  "overflow-x-clip",
                   baseStyles,
+                  edgeCorner ? "rounded-inner" : "rounded",
                   variantStyles[variant],
                   sizeStyles[size],
                   colorStyles[variant][color],
@@ -160,13 +195,26 @@ export const HawaButton: FC<ButtonProps> = ({
                 )
           }
           disabled={disabled}
-          onClick={props.onClick}
+          // onClick={props.onClick}
+          onClick={handleClick}
         >
           {!isLoading ? (
-            <div className="flex flex-row items-center gap-2 whitespace-nowrap">
-              {props.startIcon && props.startIcon}
-              {children}
-              {props.endIcon && props.endIcon}
+            <div
+              className={clsx(
+                " s flex flex-col-reverse items-start justify-center gap-4 transition-all",
+                isClicked && feedback
+                  ? " -translate-y-8 pb-1 pt-1"
+                  : "translate-y-0"
+              )}
+            >
+              {isClicked && feedback ? (
+                <div className="w-full  text-center">{buttonText}</div>
+              ) : null}
+              <div className="flex w-full flex-row items-center justify-center gap-2 whitespace-nowrap">
+                {props.startIcon && props.startIcon}
+                {children}
+                {props.endIcon && props.endIcon}
+              </div>
             </div>
           ) : (
             <HawaSpinner size="button" />

package/src/elements/HawaCodeBlock.tsx

@@ -7,6 +7,7 @@ type CodeBlockTypes = {
   language?: string
   width?: "full" | "md" | "sm"
   tabs?: TabsTypes[]
+  fileName?: string
   code?: string
 }
 type TabsTypes = {
@@ -18,21 +19,34 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
   tabs,
   language,
   code,
+  fileName,
   width = "full",
 }) => {
   const [selectedTab, setSelectedTab] = useState(0)
   const [showTooltip, setShowTooltip] = useState(0)
+  const [copyClicked, setCopyClicked] = useState(false)
   let widthStyles = {
     full: "w-full",
     md: "w-full max-w-md",
     sm: "w-full max-w-sm",
     xs: "w-full max-w-xs",
   }
+
+  const handleCopyClick = () => {
+    if (!copyClicked) {
+      setCopyClicked(true)
+      console.log("copy button clicked")
+      // Reset the button text after 2 seconds (adjust the time as needed).
+      setTimeout(() => {
+        setCopyClicked(false)
+      }, 2000)
+    }
+  }
   return (
     <div
       className={clsx(
         widthStyles[width],
-        "w-full flex-col items-center space-x-4 rounded bg-gray-800 text-left text-sm text-white sm:text-base"
+        "w-full flex-col items-center rounded bg-gray-800 text-left text-sm text-white sm:text-base"
       )}
     >
       {" "}
@@ -58,36 +72,71 @@ export const HawaCodeBlock: FC<CodeBlockTypes> = ({
           ))}
         </div>
       )}
+      {fileName && (
+        <div className="flex flex-row gap-2 rounded-t bg-gray-700  p-2 pb-0">
+          <div
+          // className={clsx(
+          //   selectedTab === i
+          //     ? "border-buttonPrimary-400 border-b-2"
+          //     : "bg-transparent"
+          // )}
+          >
+            <div
+              className={clsx(
+                "mb-1 w-full max-w-[52px] rounded-inner p-2 py-1 text-center text-[0.75rem] "
+              )}
+            >
+              {fileName}
+            </div>
+          </div>
+        </div>
+      )}
       <pre>
         <code
           className={clsx(
-            "flex flex-row items-start justify-between rounded bg-gray-800 py-4 pr-4  text-left text-sm text-white sm:text-base",
+            "flex w-full flex-row items-start justify-between rounded bg-gray-800 p-2  text-left text-sm text-white sm:text-base"
             // `language-${language}`,
-            tabs ? "" : "pl-4"
           )}
         >
-          <span className="flex">{tabs ? tabs[selectedTab].code : code}</span>
-          <HawaButton margins="none">
-            <svg
+          <div className="flex min-h-[37.75px] w-full  flex-col  justify-center p-4 ">
+            {tabs ? tabs[selectedTab].code : code}
+          </div>
+          <div className="flex flex-row items-center gap-2  p-2">
+            <div
+              className={clsx(
+                "transition-all",
+                copyClicked ? "opacity-100" : "opacity-0"
+              )}
+            >
+              Copied!
+            </div>
+            <HawaButton
+              variant="outlined"
+              color="dark"
               onClick={() => {
+                handleCopyClick()
                 navigator.clipboard.writeText(
                   tabs ? tabs[selectedTab].code : code
                 )
               }}
-              stroke="currentColor"
-              fill="none"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              height="1em"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+              margins="none"
             >
-              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
-              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
-            </svg>
-          </HawaButton>
+              <svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+              </svg>
+            </HawaButton>
+          </div>
         </code>
       </pre>
       {/* {tabs.map((tab) => (

package/src/elements/HawaInlineCode.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from "react"
+
+type InlineCodeTypes = {
+  text: string
+}
+
+export const HawaInlineCode: FC<InlineCodeTypes> = (props) => {
+  return <code className="inline-code">{props.text}</code>
+}

package/src/elements/HawaMenu.tsx

@@ -197,10 +197,10 @@ export const HawaMenu: FC<TMenuTypes> = ({
                     className={clsx(
                       "transition-all",
                       item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 px-4 py-2 text-white  hover:bg-buttonPrimary-700 rtl:flex-row-reverse"
+                        ? "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 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600  dark:hover:text-white ",
+                        : " 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]
                     )}
                   >

package/src/elements/Timeline.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from "react"
+
+type TimelineTypes = {
+  title: any
+  steps: StepTypes[]
+}
+type StepTypes = {
+  date: string
+  title: string
+  description?: string
+  actions?: any
+}
+export const Timeline: FC<TimelineTypes> = (props) => {
+  return (
+    <div>
+      <ol className="relative border-l border-gray-200 dark:border-gray-700">
+        {props.steps.map((step) => (
+          <li className="mb-10 ml-4">
+            <div className="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full border border-white bg-gray-200 dark:border-gray-900 dark:bg-gray-700"></div>
+            <time className="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">
+              {step.date}
+            </time>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              {step.title}
+            </h3>
+            <p className="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+              {step.description}
+            </p>
+            {step.actions}
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}