legalgo-FE-reactrouter/app/components/ui/breadcrumb.tsx

import { Link } from 'react-router'

type BreadcrumbProperty = {
  slug: string
}

export const Breadcrumb = (property: BreadcrumbProperty) => {
  const { slug } = property
  return (
    <div className="mb-5 flex items-center gap-2">
      <Link to={'#'}>Blog</Link>
      <div>{'>'}</div>
      <Link
        to={'#'}
        className="text-ellipsis md:text-clip ..."
      >
        {slug.slice(0, 20) + '...'}
      </Link>
    </div>
  )
}