Merge pull request #117 from abusix/pla-1032-hailstorm-component-brea…

…dcrumb

feat: added Breadcrumb Component

src/components/breadcrumb-navigation/breadcrumb-navigation-arrow.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { ChevronRightIcon } from "../../icons";
+
+export const BreadcrumbNavigationArrow = () => {
+    return <ChevronRightIcon className="h-3 w-3 text-neutral-800" />;
+};

src/components/breadcrumb-navigation/breadcrumb-navigation-item.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+import { AsChildProps, Slot } from "../slot/slot";
+
+type BreadcrumbNavigationItemProps = AsChildProps<React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    isActive?: boolean;
+};
+
+export const BreadcrumbNavigationItem: React.FC<BreadcrumbNavigationItemProps> = ({
+    isActive,
+    asChild,
+    ...props
+}) => {
+    const Comp = asChild ? Slot : "a";
+
+    return (
+        <Comp
+            className={classNames(
+                "headline-500 text-neutral-800",
+                !isActive && "cursor-pointer underline-offset-2 hover:underline",
+                isActive && "text-black"
+            )}
+            {...props}
+        />
+    );
+};

src/components/breadcrumb-navigation/breadcrumb-navigation.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { BreadcrumbNavigation } from "./breadcrumb-navigation";
+
+const meta: Meta<typeof BreadcrumbNavigation> = {
+    title: "Breadcrumb Navigation",
+    component: BreadcrumbNavigation,
+    args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BreadcrumbNavigation>;
+
+export const Base: Story = {
+    render: () => (
+        <div className="p-4">
+            <BreadcrumbNavigation>
+                <BreadcrumbNavigation.Item href="/">Home</BreadcrumbNavigation.Item>
+
+                <BreadcrumbNavigation.Arrow />
+
+                <BreadcrumbNavigation.Item href="/">Library</BreadcrumbNavigation.Item>
+
+                <BreadcrumbNavigation.Arrow />
+
+                <BreadcrumbNavigation.Item asChild isActive>
+                    <a href="/">Book</a>
+                </BreadcrumbNavigation.Item>
+            </BreadcrumbNavigation>
+        </div>
+    ),
+};

src/components/breadcrumb-navigation/breadcrumb-navigation.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { BreadcrumbNavigationItem } from "./breadcrumb-navigation-item";
+import { BreadcrumbNavigationArrow } from "./breadcrumb-navigation-arrow";
+
+export interface BreadcrumbNavigationProps {
+    children: React.ReactNode;
+}
+
+const BreadcrumbNavigation = ({ children }: BreadcrumbNavigationProps) => {
+    return <nav className="flex flex-row items-center gap-1">{children}</nav>;
+};
+
+BreadcrumbNavigation.Item = BreadcrumbNavigationItem;
+BreadcrumbNavigation.Arrow = BreadcrumbNavigationArrow;
+
+export { BreadcrumbNavigation };

src/components/breadcrumb-navigation/index.tsx

@@ -0,0 +1 @@
+export { BreadcrumbNavigation } from "./breadcrumb-navigation";

src/components/index.ts

@@ -1,6 +1,7 @@
 export { Alert, AlertIntent } from "./alert";
 export { Avatar } from "./avatar";
 export { Badge, BadgeType } from "./badge";
+export { BreadcrumbNavigation } from "./breadcrumb-navigation";
 export { Button } from "./button";
 export { Checkbox } from "./checkbox";
 export { Dialog } from "./dialog";