freesewing/sites/shared/components/breadcrumbs.mjs

import { HomeIcon, RightIcon } from 'shared/components/icons.mjs'
import Link from 'next/link'
import { PageLink } from 'shared/components/page-link.mjs'

export const Breadcrumbs = ({ crumbs, title }) =>
  crumbs ? (
    <ul className="flex flex-row flex-wrap">
      <li className="inline">
        <Link href="/" title="FreeSewing">
          <HomeIcon />
        </Link>
      </li>
      {crumbs.map((crumb) => (
        <>
          <li key={crumb.s} className="flex flex-row flex-wrap items-center">
            <RightIcon className="w-4 h-4 opacity-50" stroke={3} />
            <PageLink
              href={`/${crumb.s}`}
              title={crumb.t}
              className="text-secondary-focus font-bold px-1"
              txt={crumb.t}
            />
          </li>
        </>
      ))}
    </ul>
  ) : null