feat: ui breadcrumbs component

web/src/components/ui/breadcrumbs.tsx

@@ -0,0 +1,35 @@
+import type { FC } from "react";
+import { Link } from "react-router";
+
+interface BreadItem {
+  href?: string;
+  label: string;
+}
+
+interface IBreadcrumbsProps {
+  items: BreadItem[];
+  className?: string;
+}
+
+const Breadcrumbs: FC<IBreadcrumbsProps> = ({ items, className }) => {
+  return (
+    <div
+      className={`${className ? `${className} ` : ""} flex flex-row p-3 gap-3 items-center text-gray-800 dark:text-gray-200`}
+    >
+      {items.map((item, index) => (
+        <>
+          {item.href ? (
+            <Link to={item.href}>
+              <p className="text-blue-500">{item.label}</p>
+            </Link>
+          ) : (
+            <p>{item.label}</p>
+          )}
+          {index + 1 < items.length && <p>/</p>}
+        </>
+      ))}
+    </div>
+  );
+};
+
+export default Breadcrumbs;