Astryx Breadcrumbs

'use client';

import Breadcrumbs, {BreadcrumbItem} from '@/components/ui/astryx-breadcrumbs';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Icon} from '@astryxdesign/core/Icon';
import {HomeIcon} from '@heroicons/react/24/outline';

export default function BreadcrumbsDeepHierarchy() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Breadcrumbs>
          <BreadcrumbItem
            href="/"
            startIcon={<Icon icon={HomeIcon} size="sm" />}>
            Home
          </BreadcrumbItem>
          <BreadcrumbItem href="/products">Products</BreadcrumbItem>
          <BreadcrumbItem href="/products/electronics">
            Electronics
          </BreadcrumbItem>
          <BreadcrumbItem href="/products/electronics/phones">
            Phones
          </BreadcrumbItem>
          <BreadcrumbItem isCurrent>iPhone 15 Pro</BreadcrumbItem>
        </Breadcrumbs>
      </div>
    </Theme>
  );
}