frontend: Add breadcrumbs component (#3145)

frontend/packages/core/src/Breadcrumbs/breadcrumb.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Link } from "../link";
+import styled from "../styled";
+import { Typography } from "../typography";
+
+import type { BreadcrumbEntry } from "./types";
+
+const StyledTypography = styled(Typography)({
+  fontWeight: 500,
+});
+
+const Breadcrumb = ({ label, url }: BreadcrumbEntry) => {
+  return url ? (
+    <Link href={url} target="_self" whiteSpace="nowrap">
+      <StyledTypography variant="caption2" color="inherit">
+        {label}
+      </StyledTypography>
+    </Link>
+  ) : (
+    <StyledTypography variant="caption2">{label}</StyledTypography>
+  );
+};
+
+export default Breadcrumb;

frontend/packages/core/src/Breadcrumbs/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Breadcrumbs as MuiBreadcrumbs, Theme } from "@mui/material";
+import { alpha } from "@mui/system";
+
+import styled from "../styled";
+
+import Breadcrumb from "./breadcrumb";
+import type { BreadcrumbEntry } from "./types";
+
+interface BreadcrumbsProps {
+  entries: BreadcrumbEntry[];
+}
+
+const StyledBreadcrumbs = styled(MuiBreadcrumbs)(({ theme }: { theme: Theme }) => ({
+  margin: theme.spacing(theme.clutch.spacing.sm, theme.clutch.spacing.none),
+  "& .MuiBreadcrumbs-separator": {
+    color: alpha(theme.colors.neutral[900], 0.6),
+  },
+}));
+
+const Breadcrumbs = ({ entries }: BreadcrumbsProps) => (
+  <StyledBreadcrumbs>
+    {entries.map((entry: BreadcrumbEntry) => (
+      <Breadcrumb key={entry.label} {...entry} />
+    ))}
+  </StyledBreadcrumbs>
+);
+
+export * from "./types";
+
+export default Breadcrumbs;

frontend/packages/core/src/Breadcrumbs/types.tsx

@@ -0,0 +1,4 @@
+export interface BreadcrumbEntry {
+  label: string;
+  url?: string;
+}

frontend/packages/core/src/index.tsx

@@ -63,6 +63,7 @@ export { useTheme } from "./AppProvider/themes";
 export { ThemeProvider } from "./Theme";
 export { getDisplayName } from "./utils";
 export { default as WorkflowLayout } from "./WorkflowLayout";
+export { default as Breadcrumbs } from "./Breadcrumbs";
 
 export { css as EMOTION_CSS, keyframes as EMOTION_KEYFRAMES } from "@emotion/react";
 
@@ -84,3 +85,4 @@ export type {
 export type { ClutchError } from "./Network/errors";
 export type { TypographyProps } from "./typography";
 export type { StyledComponent } from "@emotion/styled";
+export type { BreadcrumbEntry } from "./Breadcrumbs";