Breadcrumb.tsx 662 B

123456789101112131415161718192021222324252627282930313233
  1. import React from 'react';
  2. import { NavLink } from 'react-router-dom';
  3. import { v4 } from 'uuid';
  4. interface Link {
  5. label: string;
  6. href: string;
  7. }
  8. interface Props {
  9. links?: Link[];
  10. }
  11. const Breadcrumb: React.FC<Props> = ({ links, children }) => {
  12. return (
  13. <nav className="breadcrumb" aria-label="breadcrumbs">
  14. <ul>
  15. {links &&
  16. links.map(({ label, href }) => (
  17. <li key={v4()}>
  18. <NavLink to={href}>{label}</NavLink>
  19. </li>
  20. ))}
  21. <li className="is-active">
  22. <span className="">{children}</span>
  23. </li>
  24. </ul>
  25. </nav>
  26. );
  27. };
  28. export default Breadcrumb;