chore: resolve merge conflicts

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

@@ -0,0 +1,217 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { faCaretDown, faChevronRight, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, ReactNode } from "@tanstack/react-router";
+import { LinkComponentProps } from "node_modules/@tanstack/react-router/dist/esm/link";
+import { twMerge } from "tailwind-merge";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger
+} from "../Dropdown";
+
+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 font-medium", className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={twMerge("transition-colors hover:text-primary-400", 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";
+
+enum BreadcrumbTypes {
+  Dropdown = "dropdown",
+  Component = "component"
+}
+
+export type TBreadcrumbFormat =
+  | {
+      type: BreadcrumbTypes.Dropdown;
+      label: string;
+      dropdownTitle?: string;
+      links: { label: string; link: LinkComponentProps }[];
+    }
+  | {
+      type: BreadcrumbTypes.Component;
+      component: ReactNode;
+    }
+  | {
+      type: undefined;
+      link?: LinkComponentProps;
+      label: string;
+      icon?: ReactNode;
+    };
+
+const BreadcrumbContainer = ({ breadcrumbs }: { breadcrumbs: TBreadcrumbFormat[] }) => (
+  <div className="mx-auto max-w-7xl py-4 capitalize text-white">
+    <Breadcrumb>
+      <BreadcrumbList>
+        {(breadcrumbs as TBreadcrumbFormat[]).map((el, index) => {
+          const isNotLastCrumb = index + 1 !== breadcrumbs.length;
+          const BreadcrumbSegment = isNotLastCrumb ? BreadcrumbLink : BreadcrumbPage;
+
+          if (el.type === BreadcrumbTypes.Dropdown) {
+            return (
+              <React.Fragment key={`breadcrumb-group-${index + 1}`}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger>
+                    <BreadcrumbItem>
+                      <BreadcrumbSegment>
+                        {el.label} <FontAwesomeIcon icon={faCaretDown} size="sm" />
+                      </BreadcrumbSegment>
+                    </BreadcrumbItem>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent>
+                    {el?.dropdownTitle && <DropdownMenuLabel>{el.dropdownTitle}</DropdownMenuLabel>}
+                    {el.links.map((i, dropIndex) => (
+                      <Link
+                        {...i.link}
+                        key={`breadcrumb-group-${index + 1}-dropdown-${dropIndex + 1}`}
+                      >
+                        <DropdownMenuItem>{i.label}</DropdownMenuItem>
+                      </Link>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                {isNotLastCrumb && <BreadcrumbSeparator />}
+              </React.Fragment>
+            );
+          }
+
+          if (el.type === BreadcrumbTypes.Component) {
+            const Component = el.component;
+            return (
+              <React.Fragment key={`breadcrumb-group-${index + 1}`}>
+                <BreadcrumbItem>
+                  <BreadcrumbSegment>
+                    <Component />
+                  </BreadcrumbSegment>
+                </BreadcrumbItem>
+                {isNotLastCrumb && <BreadcrumbSeparator />}
+              </React.Fragment>
+            );
+          }
+
+          const Icon = el?.icon;
+          return (
+            <React.Fragment key={`breadcrumb-group-${index + 1}`}>
+              {"link" in el && isNotLastCrumb ? (
+                <Link {...el.link}>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink className="inline-flex items-center gap-1.5">
+                      {Icon && <Icon />}
+                      {el.label}
+                    </BreadcrumbLink>
+                  </BreadcrumbItem>
+                </Link>
+              ) : (
+                <BreadcrumbItem>
+                  <BreadcrumbPage className="inline-flex items-center gap-1.5">
+                    {Icon && <Icon />}
+                    {el.label}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              )}
+              {isNotLastCrumb && <BreadcrumbSeparator />}
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  </div>
+);
+
+export {
+  Breadcrumb,
+  BreadcrumbContainer,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbTypes
+};

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

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

frontend/src/components/v2/Menu/Menu.tsx

@@ -1,6 +1,5 @@
 import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from "react";
 import { DotLottie, DotLottieReact } from "@lottiefiles/dotlottie-react";
-import { motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
 export type MenuProps = {
@@ -30,7 +29,7 @@ export const MenuItem = <T extends ElementType = "button">({
   className,
   isDisabled,
   isSelected,
-  as: Item = "button",
+  as: Item = "div",
   description,
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
   inputRef,
@@ -38,46 +37,40 @@ export const MenuItem = <T extends ElementType = "button">({
 }: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
   const iconRef = useRef<DotLottie | null>(null);
   return (
-    <div onMouseEnter={() => iconRef.current?.play()} onMouseLeave={() => iconRef.current?.stop()}>
-      <li
-        className={twMerge(
-          "duration-50 group mt-0.5 flex cursor-pointer flex-col rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
-          isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
-          isDisabled && "cursor-not-allowed hover:bg-transparent",
-          className
-        )}
-      >
-        <motion.span className="flex w-full flex-row items-center justify-start rounded-sm">
-          <Item
-            type="button"
-            role="menuitem"
-            className="relative flex items-center"
-            ref={inputRef}
-            {...props}
-          >
-            <div
-              className={`${
-                isSelected ? "visisble" : "invisible"
-              } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
-            />
-            {icon && (
-              <div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
-                <DotLottieReact
-                  dotLottieRefCallback={(el) => {
-                    iconRef.current = el;
-                  }}
-                  src={`/lotties/${icon}.json`}
-                  loop
-                  className="h-full w-full"
-                />
-              </div>
-            )}
-            <span className="flex-grow text-left">{children}</span>
-          </Item>
-          {description && <span className="mt-2 text-xs">{description}</span>}
-        </motion.span>
-      </li>
-    </div>
+    <Item
+      type="button"
+      role="menuitem"
+      className={twMerge(
+        "duration-50 group relative mt-0.5 flex w-full cursor-pointer items-center rounded px-1 py-2 font-inter text-sm text-bunker-100 transition-all hover:bg-mineshaft-700",
+        isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
+        isDisabled && "cursor-not-allowed hover:bg-transparent",
+        className
+      )}
+      ref={inputRef}
+      onMouseEnter={() => iconRef.current?.play()}
+      onMouseLeave={() => iconRef.current?.stop()}
+      {...props}
+    >
+      <div
+        className={`${
+          isSelected ? "visisble" : "invisible"
+        } absolute -left-[0.28rem] h-5 w-[0.07rem] rounded-md bg-primary`}
+      />
+      {icon && (
+        <div style={{ width: "22px", height: "22px" }} className="my-auto ml-1 mr-3">
+          <DotLottieReact
+            dotLottieRefCallback={(el) => {
+              iconRef.current = el;
+            }}
+            src={`/lotties/${icon}.json`}
+            loop
+            className="h-full w-full"
+          />
+        </div>
+      )}
+      <span className="flex-grow text-left">{children}</span>
+      {description && <span className="mt-2 text-xs">{description}</span>}
+    </Item>
   );
 };
 
@@ -90,7 +83,7 @@ export type MenuGroupProps = {
 
 export const MenuGroup = ({ children, title }: MenuGroupProps): JSX.Element => (
   <>
-    <li className="p-2 text-xs text-gray-400">{title}</li>
+    <li className="px-2 pt-3 text-xs uppercase text-gray-400">{title}</li>
     {children}
   </>
 );

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

@@ -0,0 +1,19 @@
+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 className="mt-2 text-gray-400">{description}</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";