@sikka/hawa 0.0.108 → 0.0.109

package/lib/stories/ElementsStories/Breadcrumb.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const BreadCrumb: any;
+export declare const BreadCrumWithSeparator: any;
+export declare const BreadcrumbIconSeparator: any;

package/package.json

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

package/src/elements/Breadcrumb.tsx

@@ -0,0 +1,40 @@
+import React, { FC, ReactNode } from "react"
+import { IconType } from "react-icons"
+
+type TBreadcrumItem = {
+  label: string
+  href: string
+}
+
+type TBreadcrumb = {
+  breadcrumbLink: TBreadcrumItem[]
+  separator?: string | ReactNode
+}
+
+const Breadcrumb: FC<TBreadcrumb> = ({
+  breadcrumbLink,
+  separator = "/",
+  ...props
+}) => {
+  return (
+    <div className="flex flex-row items-center">
+      {breadcrumbLink.map((singleBreadcrumbLink, index) => (
+        <div className="flex flex-row items-center justify-center mx-1">
+          <a
+            href={singleBreadcrumbLink.href}
+            className="mx-1 hover:underline hover:decoration-2"
+          >
+            {singleBreadcrumbLink.label}
+          </a>
+          {index != breadcrumbLink.length - 1
+            ? typeof separator == "string"
+              ? separator
+              : <div>{separator}</div>
+            : null}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Breadcrumb

package/src/elements/index.ts

@@ -23,6 +23,7 @@ export * from "./HawaMenu"
 export * from "./HawaDrawer"
 export * from "./HawaCopyrights"
 export * from "./HawaTimeline"
+export * from "./Breadcrumb"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/styles.css

@@ -583,6 +583,10 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -591,10 +595,6 @@ video {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -1755,6 +1755,9 @@ body {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+.hover\:decoration-2:hover {
+  text-decoration-thickness: 2px;
+}
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);