Use breadcrumbs

apps/emails-and-messages/src/components/basic-layout.tsx

@@ -1,5 +1,5 @@
+import { Breadcrumbs } from "@saleor/apps-ui";
 import { Box } from "@saleor/macaw-ui/next";
-import { Breadcrumbs } from "./breadcrumbs";
 
 interface BasicLayoutProps {
   children: React.ReactNode;
@@ -10,7 +10,13 @@ interface BasicLayoutProps {
 export const BasicLayout = ({ children, breadcrumbs, isLoading = false }: BasicLayoutProps) => {
   return (
     <Box padding={10} display="grid" gap={13}>
-      {breadcrumbs?.length && <Breadcrumbs items={breadcrumbs} />}
+      {breadcrumbs?.length && (
+        <Breadcrumbs>
+          {breadcrumbs.map((breadcrumb) => (
+            <Breadcrumbs.Item href={breadcrumb.href}>{breadcrumb.name}</Breadcrumbs.Item>
+          ))}
+        </Breadcrumbs>
+      )}
       {children}
     </Box>
   );

apps/emails-and-messages/src/components/breadcrumbs.tsx

@@ -1,55 +0,0 @@
-import { Box, Text, TextProps } from "@saleor/macaw-ui/next";
-import { TextLink } from "./text-link";
-import icon from "../public/breadcrumb-separator.svg";
-import Image from "next/image";
-
-type BreadcrumbItem = { name: string; href?: string };
-
-interface BreadcrumbProps extends BreadcrumbItem {
-  isLast?: boolean;
-}
-
-const Breadcrumb = ({ name, href, isLast }: BreadcrumbProps) => {
-  const textProps: TextProps = {
-    variant: "hero",
-    display: isLast ? "block" : { mobile: "none", desktop: "block" },
-  };
-
-  if (!!href) {
-    return (
-      <TextLink href={href} {...textProps}>
-        {name}
-      </TextLink>
-    );
-  }
-  return <Text {...textProps}>{name}</Text>;
-};
-
-interface BreadcrumbsProps {
-  items: Array<BreadcrumbItem>;
-}
-
-/**
- * Displays breadcrumbs for the current page.
- * On desktop full path is visible. On mobile only last item is shown.
- */
-export const Breadcrumbs = (props: BreadcrumbsProps) => {
-  if (props.items.length === 0) {
-    return null;
-  }
-
-  const items = [...props.items];
-  const lastItem = items.pop()!; // can enforce the type since array is at least one element long
-
-  return (
-    <Box display="flex" gap={6}>
-      {items.map((item) => (
-        <Box key={item.name} display={{ mobile: "none", desktop: "flex" }} gap={6}>
-          <Breadcrumb {...item} key={item.name} />
-          <Image alt="Separator icon" src={icon} height={32} width={32} />
-        </Box>
-      ))}
-      <Breadcrumb isLast={true} {...lastItem} />
-    </Box>
-  );
-};

apps/emails-and-messages/src/pages/configuration/choose-provider.tsx

@@ -1,6 +1,5 @@
 import { Box, Text } from "@saleor/macaw-ui/next";
 import { NextPage } from "next";
-import { Breadcrumbs } from "../../components/breadcrumbs";
 import { SectionWithDescription } from "../../components/section-with-description";
 import { ProviderSelectionBox } from "../../modules/app-configuration/ui/provider-selection-box";
 import { useRouter } from "next/router";

apps/emails-and-messages/src/pages/configuration/index.tsx

@@ -1,6 +1,5 @@
 import { Box, Text } from "@saleor/macaw-ui/next";
 import { NextPage } from "next";
-import { Breadcrumbs } from "../../components/breadcrumbs";
 import { SectionWithDescription } from "../../components/section-with-description";
 import {
   ConfigurationListItem,