From 50dce801a237b597cff9ff77c38acde82b4defc9 Mon Sep 17 00:00:00 2001
From: PA4KEV <kevin.vd.vleuten@gmail.com>
Date: Sat, 17 Feb 2024 20:04:18 +0100
Subject: [PATCH] Add breadcrumbs component.

---
 src/UI/Breadcrumbs.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/UI/Breadcrumbs.js

diff --git a/src/UI/Breadcrumbs.js b/src/UI/Breadcrumbs.js
new file mode 100644
index 0000000..c981fa8
--- /dev/null
+++ b/src/UI/Breadcrumbs.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const Breadcrumbs = ({ separator, path, children }) => {
+    const items = React.Children.toArray(children);
+
+    const generatePath = (index) => {
+        return path.split('/').slice(0, index + 1).join('/');
+    };
+
+    if (items.length !== path.split('/').length) {
+        throw new Error('The number of breadcrumbs does not match the number of items in the path.');
+    }
+
+    return (
+        <div className='breadcrumbs'>
+            {items.map((item, index) => (
+                <React.Fragment key={index}>
+                    {index > 0 && <span className='separator'>{separator}</span>}
+                    {index < items.length - 1 ? (
+                        <a href={generatePath(index)}>{item}</a>
+                    ) : (
+                        <a href={generatePath(index)}>{item}</a>
+                    )}
+                </React.Fragment>
+            ))}
+        </div>
+    )
+}
+
+export default Breadcrumbs;
\ No newline at end of file