gbs-add-block 0.0.64 → 0.0.65

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.64)
+# GBS Building Blocks 2.0 (v0.0.65)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.64)
+## What's New 🎉 (Ver 0.0.65)
 
 - Updated for bug fixes.
-- New component "Skeleton" & "Navbar" Added.
+- New component "Skeleton", "Breadcrumb" & "Navbar" Added.
 - Planned Deprecation of Current Grid Component and Adding Beta version for the New Data Grid.
 
 ## Authors

package/index.js

@@ -27,6 +27,7 @@ const CONFIG = {
     "Skeleton",
     "Navbar",
     "DataGrid",
+    "BreadCrumb",
   ],
   // Define component dependencies
   dependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/breadcrumb/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+import { useLocation } from "@grampro/headless-helpers";
+import Icon from "../icon/Icon";
+import { rightArrow } from "../icon/iconPaths";
+import { BreadcrumbsProps } from "./types";
+
+export const Breadcrumb = ({
+  showHome = true,
+  rootPath = "/",
+  homeLabel = "Home",
+  transformLabel,
+  className = "",
+  activeLinkClass = "font-medium text-gray-900 dark:text-white",
+  inactiveLinkClass = "text-gray-500 hover:text-gray-700",
+}: BreadcrumbsProps) => {
+  const { pathSegments } = useLocation({
+    showHome,
+    rootPath,
+    homeLabel,
+    transformLabel,
+  });
+
+  if (pathSegments.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav aria-label="Breadcrumb" className={className}>
+      <ol className="flex flex-wrap items-center">
+        {pathSegments.map((segment, index) => {
+          const isLast = index === pathSegments.length - 1;
+          return (
+            <li key={index} className="flex items-center">
+              <>
+                <a
+                  href={segment.path}
+                  className={isLast ? activeLinkClass : inactiveLinkClass}
+                >
+                  {segment.label}
+                </a>
+                <span className="mx-2 text-gray-400">
+                  <Icon
+                    elements={rightArrow}
+                    dimensions={{ width: 14, height: 14 }}
+                    svgClass={
+                      "stroke-black fill-none dark:stroke-white cursor-pointer"
+                    }
+                  />
+                </span>
+              </>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};

package/source/components/breadcrumb/types.ts

@@ -0,0 +1,10 @@
+export type BreadcrumbsProps = {
+  homeLabel?: string;
+  showHome?: boolean;
+  transformLabel?: (segment: string) => string;
+  rootPath?: string;
+  className?: string;
+  separator?: string | React.ReactNode;
+  activeLinkClass?: string;
+  inactiveLinkClass?: string;
+};