Breadcrumbs

Build a breadcrumb trail as a single React component. Given a fixed array of page names from the site root to the current page, render each one in order, separated by a slash — where every crumb is a link except the last, which is the page you're on and shows as plain text. It's a pure rendering exercise: the whole problem is mapping an array to markup and treating one index specially.

Task

The starter App.tsx defines the path array and renders an empty <ol>. Fill it in:

1. Map the array. Turn path into a list of <li className="crumb"> items.
2. Separate them. Put a <li className="sep" aria-hidden="true">/</li> between crumbs.
3. Link all but the last. Each item except the final one is an <a href="#">.
4. Mark the current page. The last item is plain text in a <span className="current" aria-current="page"> — not a link.

Examples

const path = ['Home', 'Products', 'Laptops', 'ThinkPad X1'];
// Home / Products / Laptops / ThinkPad X1
//  ^links^  ^links^  ^links^   ^current (aria-current="page")^

const path = ['Home'];
// Home  — a single item is the current page, so it renders as plain text with no separator.

Notes

• The last index is special. Compare i === path.length - 1 to decide link vs. current page.
• Wrap it semantically. The trail lives in a <nav aria-label="Breadcrumb"> around an <ol> — the order matters, so an ordered list is correct.
• Separators are decorative. Give each / aria-hidden="true" so a screen reader reads the pages, not the punctuation.
• Styling (colors, spacing, the current-page weight) is already in styles.css; focus on the mapping.