Implemented a reusable breadcrumb component

app/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import BreadcrumbItem from "./BreadcrumbItem";
+import BreadcrumbSeparator from "./BreadcrumbSeparator";
+
+interface Page {
+  name: string;
+  link: string;
+}
+
+interface BreadcrumbProperties {
+  pages: Page[];
+}
+
+const Breadcrumb: React.FC<BreadcrumbProperties> = ({ pages }) => {
+  return (
+    <nav aria-label="breadcrumb" className="flex items-center">
+      {pages.map((page, index) => (
+        <React.Fragment key={index}>
+          <BreadcrumbItem
+            name={page.name}
+            link={page.link}
+            isCurrent={index === pages.length - 1}
+          />
+          {index < pages.length - 1 && (
+            <span className="mx-2 flex items-center">
+              <BreadcrumbSeparator />
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+};
+
+export default Breadcrumb;

app/components/Breadcrumb/BreadcrumbItem.tsx

@@ -0,0 +1,39 @@
+import { Link } from "@remix-run/react";
+import React from "react";
+
+interface BreadcrumbItemProperties {
+  name: string;
+  link: string;
+  isCurrent: boolean;
+}
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProperties> = ({
+  name,
+  link,
+  isCurrent,
+}) => {
+  const commonStyles = "text-[#222] font-roboto text-xs font-normal leading-4";
+  const itemStyles = "flex items-center py-1";
+  const marginRight = isCurrent ? "" : "mr-2";
+
+  if (isCurrent) {
+    return (
+      <span
+        className={`${commonStyles} text-[#6A6A6A] ${itemStyles} ${marginRight}`}
+      >
+        {name}
+      </span>
+    );
+  }
+
+  return (
+    <Link
+      to={link}
+      className={`${commonStyles} hover:underline ${itemStyles} ${marginRight}`}
+    >
+      {name}
+    </Link>
+  );
+};
+
+export default BreadcrumbItem;

app/components/Breadcrumb/BreadcrumbProvider.tsx

@@ -0,0 +1,24 @@
+import { useLocation } from "@remix-run/react";
+import React from "react";
+import Breadcrumb from "./Breadcrumb";
+
+const BreadcrumbProvider: React.FC = () => {
+  const location = useLocation();
+  const pathnames = location.pathname.split("/").filter(Boolean);
+
+  const breadcrumbPages = pathnames.map((pathname: string, index: number) => {
+    const link = `/${pathnames.slice(0, index + 1).join("/")}`;
+    return {
+      name: pathname.charAt(0).toUpperCase() + pathname.slice(1),
+      link,
+    };
+  });
+  breadcrumbPages.unshift({
+    name: "Home",
+    link: "/",
+  });
+
+  return <Breadcrumb pages={breadcrumbPages} />;
+};
+
+export default BreadcrumbProvider;

app/components/Breadcrumb/BreadcrumbSeparator.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+const BreadcrumbSeparator: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+  >
+    <path
+      d="M4.5 1.5L8.7375 5.7375C8.80621 5.8076 8.8447 5.90184 8.8447 6C8.8447 6.09816 8.80621 6.1924 8.7375 6.2625L4.5 10.5"
+      stroke="#6A6A6A"
+    />
+  </svg>
+);
+
+export default BreadcrumbSeparator;

app/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as BreadcrumbItem } from "./BreadcrumbItem";