From 4dbc608a5c535d892cc2ad1e73b0b6cda9649dcf Mon Sep 17 00:00:00 2001
From: Yimiika <oluwafemiaina8@gmail.com>
Date: Sun, 21 Jul 2024 12:00:50 +0100
Subject: [PATCH 1/3] Implemented reusable breadcrumb component

---
 app/components/Breadcrumb/Breadcrumb.tsx      | 35 +++++++++++++++++
 app/components/Breadcrumb/BreadcrumbItem.tsx  | 39 +++++++++++++++++++
 .../Breadcrumb/BreadcrumbProvider.tsx         | 24 ++++++++++++
 .../Breadcrumb/BreadcrumbSeparator.tsx        | 18 +++++++++
 app/components/Breadcrumb/index.ts            |  2 +
 5 files changed, 118 insertions(+)
 create mode 100644 app/components/Breadcrumb/Breadcrumb.tsx
 create mode 100644 app/components/Breadcrumb/BreadcrumbItem.tsx
 create mode 100644 app/components/Breadcrumb/BreadcrumbProvider.tsx
 create mode 100644 app/components/Breadcrumb/BreadcrumbSeparator.tsx
 create mode 100644 app/components/Breadcrumb/index.ts

diff --git a/app/components/Breadcrumb/Breadcrumb.tsx b/app/components/Breadcrumb/Breadcrumb.tsx
new file mode 100644
index 00000000..89083d78
--- /dev/null
+++ b/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 BreadcrumbProps {
+  pages: Page[];
+}
+
+const Breadcrumb: React.FC<BreadcrumbProps> = ({ 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="flex items-center mx-2">
+              <BreadcrumbSeparator />
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+};
+
+export default Breadcrumb;
diff --git a/app/components/Breadcrumb/BreadcrumbItem.tsx b/app/components/Breadcrumb/BreadcrumbItem.tsx
new file mode 100644
index 00000000..d43ac1f6
--- /dev/null
+++ b/app/components/Breadcrumb/BreadcrumbItem.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Link } from "@remix-run/react";
+
+interface BreadcrumbItemProps {
+  name: string;
+  link: string;
+  isCurrent: boolean;
+}
+
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  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;
diff --git a/app/components/Breadcrumb/BreadcrumbProvider.tsx b/app/components/Breadcrumb/BreadcrumbProvider.tsx
new file mode 100644
index 00000000..b3908548
--- /dev/null
+++ b/app/components/Breadcrumb/BreadcrumbProvider.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { useLocation } from "@remix-run/react";
+import Breadcrumb from "./Breadcrumb";
+
+const BreadcrumbProvider: React.FC = () => {
+  const location = useLocation();
+  const pathnames = location.pathname.split("/").filter((x) => x);
+
+  const breadcrumbPages = pathnames.map((pathname, index) => {
+    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;
diff --git a/app/components/Breadcrumb/BreadcrumbSeparator.tsx b/app/components/Breadcrumb/BreadcrumbSeparator.tsx
new file mode 100644
index 00000000..02a25b9d
--- /dev/null
+++ b/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;
diff --git a/app/components/Breadcrumb/index.ts b/app/components/Breadcrumb/index.ts
new file mode 100644
index 00000000..4b2d0bad
--- /dev/null
+++ b/app/components/Breadcrumb/index.ts
@@ -0,0 +1,2 @@
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as BreadcrumbItem } from "./BreadcrumbItem";

From 59222cf0c3a9d619e98faf05261708b014c073ae Mon Sep 17 00:00:00 2001
From: Yimiika <oluwafemiaina8@gmail.com>
Date: Mon, 22 Jul 2024 14:33:47 +0100
Subject: [PATCH 2/3] Fixed type errors in the BreadcrumbProvider

---
 app/components/Breadcrumb/BreadcrumbProvider.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Breadcrumb/BreadcrumbProvider.tsx b/app/components/Breadcrumb/BreadcrumbProvider.tsx
index b3908548..ff167127 100644
--- a/app/components/Breadcrumb/BreadcrumbProvider.tsx
+++ b/app/components/Breadcrumb/BreadcrumbProvider.tsx
@@ -4,9 +4,9 @@ import Breadcrumb from "./Breadcrumb";
 
 const BreadcrumbProvider: React.FC = () => {
   const location = useLocation();
-  const pathnames = location.pathname.split("/").filter((x) => x);
+  const pathnames = location.pathname.split("/").filter((x: string) => x);
 
-  const breadcrumbPages = pathnames.map((pathname, index) => {
+  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),

From dd00a5f0a35898158285be92522ea35fa1c798dd Mon Sep 17 00:00:00 2001
From: Yimiika <oluwafemiaina8@gmail.com>
Date: Mon, 22 Jul 2024 14:47:33 +0100
Subject: [PATCH 3/3] Fixed Lint errors

---
 app/components/Breadcrumb/Breadcrumb.tsx          | 6 +++---
 app/components/Breadcrumb/BreadcrumbItem.tsx      | 6 +++---
 app/components/Breadcrumb/BreadcrumbProvider.tsx  | 4 ++--
 app/components/Breadcrumb/BreadcrumbSeparator.tsx | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/components/Breadcrumb/Breadcrumb.tsx b/app/components/Breadcrumb/Breadcrumb.tsx
index 89083d78..2a3de336 100644
--- a/app/components/Breadcrumb/Breadcrumb.tsx
+++ b/app/components/Breadcrumb/Breadcrumb.tsx
@@ -7,11 +7,11 @@ interface Page {
   link: string;
 }
 
-interface BreadcrumbProps {
+interface BreadcrumbProperties {
   pages: Page[];
 }
 
-const Breadcrumb: React.FC<BreadcrumbProps> = ({ pages }) => {
+const Breadcrumb: React.FC<BreadcrumbProperties> = ({ pages }) => {
   return (
     <nav aria-label="breadcrumb" className="flex items-center">
       {pages.map((page, index) => (
@@ -22,7 +22,7 @@ const Breadcrumb: React.FC<BreadcrumbProps> = ({ pages }) => {
             isCurrent={index === pages.length - 1}
           />
           {index < pages.length - 1 && (
-            <span className="flex items-center mx-2">
+            <span className="mx-2 flex items-center">
               <BreadcrumbSeparator />
             </span>
           )}
diff --git a/app/components/Breadcrumb/BreadcrumbItem.tsx b/app/components/Breadcrumb/BreadcrumbItem.tsx
index d43ac1f6..89fbcab9 100644
--- a/app/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/app/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,13 +1,13 @@
-import React from "react";
 import { Link } from "@remix-run/react";
+import React from "react";
 
-interface BreadcrumbItemProps {
+interface BreadcrumbItemProperties {
   name: string;
   link: string;
   isCurrent: boolean;
 }
 
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+const BreadcrumbItem: React.FC<BreadcrumbItemProperties> = ({
   name,
   link,
   isCurrent,
diff --git a/app/components/Breadcrumb/BreadcrumbProvider.tsx b/app/components/Breadcrumb/BreadcrumbProvider.tsx
index ff167127..8ae5f561 100644
--- a/app/components/Breadcrumb/BreadcrumbProvider.tsx
+++ b/app/components/Breadcrumb/BreadcrumbProvider.tsx
@@ -1,10 +1,10 @@
-import React from "react";
 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((x: string) => x);
+  const pathnames = location.pathname.split("/").filter(Boolean);
 
   const breadcrumbPages = pathnames.map((pathname: string, index: number) => {
     const link = `/${pathnames.slice(0, index + 1).join("/")}`;
diff --git a/app/components/Breadcrumb/BreadcrumbSeparator.tsx b/app/components/Breadcrumb/BreadcrumbSeparator.tsx
index 02a25b9d..02c161a5 100644
--- a/app/components/Breadcrumb/BreadcrumbSeparator.tsx
+++ b/app/components/Breadcrumb/BreadcrumbSeparator.tsx
@@ -15,4 +15,4 @@ const BreadcrumbSeparator: React.FC = () => (
   </svg>
 );
 
-export default BreadcrumbSeparator;
+export default BreadcrumbSeparator;
\ No newline at end of file