Breadcrumb component using React Aria

The current checkout state is displayed using a Breadcrumb component.

This component is based on react-aria-components and uses the Breadcrumbs/Breadcrumb components combination.

We export both from a new Breadcrumbs.tsx file:

import * as Aria from "react-aria-components";

const Breadcrumbs = <T extends object>({ ...props }: Aria.BreadcrumbsProps<T>) => {
  return (
    <Aria.Breadcrumbs<T> {...props} />
  );
};

const Breadcrumb = ({ ...props }: Aria.BreadcrumbProps) => {
  return (
    <Aria.Breadcrumb {...props} />
  );
};

export { Breadcrumb, Breadcrumbs };

react-aria-components provide data attributes to style components in different states. We use these properties to style the breadcrumbs using tailwindcss:

We also add a separator between each breadcrumb using after and :not(:last-child).

import * as Aria from "react-aria-components";
import { cn } from "~/utils";

const Breadcrumbs = <T extends object>({
  className,
  ...props
}: Aria.BreadcrumbsProps<T>) => {
  return (
    <Aria.Breadcrumbs<T>
      {...props}
      className={cn("flex items-center justify-center", className)}
    />
  );
};

const Breadcrumb = ({ ...props }: Aria.BreadcrumbProps) => {
  return (
    <Aria.Breadcrumb
      {...props}
      className="data-[selected=true]:text-blue-500 data-[selected=true]:font-semibold after:content-['/'] [&:not(:last-child)::after]:text-gray-200 [&:last-child::after]:invisible after:px-4"
    />
  );
};

export { Breadcrumb, Breadcrumbs };

Breadcrumbs and Breadcrumb can now be used to mark the current checkout state in sync with the state from the xstate machine.