Breadcrumb.astro

---
import Link from "./Link.astro";
type Props = {
  breadcrumb: {
    back: {
      title: string;
      href: string;
    };
    title: string;
  };
  order?: number;
  total?: number;
};

const { breadcrumb, order, total } = Astro.props;
---

<div x-cloak x-show="breadcrumb" class="flex items-center justify-between">
  <div
    class="flex items-center space-x-2 text-sm md:space-x-2.5 md:text-base lg:space-x-3 lg:text-lg"
  >
    <span>
      <Link href={breadcrumb.back.href} class="hover:text-primary">
        {breadcrumb.back.title}
      </Link>
    </span>
    <span class="text-lg font-bold text-primary md:text-xl lg:text-2xl">
      /
    </span>
    <span class="underline decoration-dotted">{breadcrumb.title}</span>
  </div>

  {
    total && order && (
      <div>
        <span class="text-sm md:text-base lg:text-lg">
          Guide <strong>{order}</strong> of <strong>{total}</strong>
        </span>
      </div>
    )
  }
</div>