feat: completed org breadcrumbs

frontend/src/components/v2/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { faChevronRight, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={twMerge(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-bunker-100 sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={twMerge("inline-flex items-center gap-1.5", className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  return (
+    <li
+      ref={ref}
+      className={twMerge("transition-colors hover:text-bunker-200", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={twMerge("font-normal text-bunker-200 last:text-bunker-300", className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={twMerge("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+    {...props}
+  >
+    {children ?? <FontAwesomeIcon icon={faChevronRight} />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={twMerge("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <FontAwesomeIcon icon={faEllipsis} className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};

frontend/src/components/v2/Breadcrumb/index.tsx

@@ -0,0 +1 @@
+export * from "./Breadcrumb";

frontend/src/components/v2/PageHeader/PageHeader.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "@tanstack/react-router";
+
+type Props = {
+  title: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+};
+
+export const PageHeader = ({ title, description, children }: Props) => (
+  <div className="mb-4">
+    <div className="flex w-full justify-between">
+      <div>
+        <h1 className="mr-4 text-3xl font-semibold capitalize text-white">{title}</h1>
+      </div>
+      <div>{children}</div>
+    </div>
+    <div>
+      <p className="mt-2 text-gray-400">{description}</p>
+    </div>
+  </div>
+);

frontend/src/components/v2/PageHeader/index.tsx

@@ -0,0 +1 @@
+export { PageHeader } from "./PageHeader";

frontend/src/components/v2/index.tsx

@@ -2,6 +2,7 @@
 export * from "./Accordion";
 export * from "./Alert";
 export * from "./Badge";
+export * from "./Breadcrumb";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
@@ -21,6 +22,7 @@ export * from "./Input";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./NoticeBanner";
+export * from "./PageHeader";
 export * from "./Pagination";
 export * from "./Popoverv2";
 export * from "./SecretInput";