From 5fe9f484d3641718defdae90157d2b65afa29107 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Thu, 28 Jul 2022 13:34:45 +0300
Subject: [PATCH 1/2] Implement Breadcrumbs component

---
 src/components/breadcrumbs.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/breadcrumbs.tsx

diff --git a/src/components/breadcrumbs.tsx b/src/components/breadcrumbs.tsx
new file mode 100644
index 0000000..90c9a4e
--- /dev/null
+++ b/src/components/breadcrumbs.tsx
@@ -0,0 +1,21 @@
+import { isArray } from "lodash";
+import React from "react";
+
+type Props = {
+    divider?: string;
+    children: React.ReactNode;
+}
+/* -------------------------------------------------------------------------- */
+/*       use: <Breadcrumbs divider="/","●" or any> children </Breadcrumbs>    */
+/* -------------------------------------------------------------------------- */
+export default function Breadcrumbs({divider ,children}: Props) {
+    return(
+             <>
+                {divider}&nbsp;{
+
+                    isArray(children) ? children.join(' '+divider+' ') : children
+                }
+                &nbsp;{divider}
+            </>        
+    )
+}
\ No newline at end of file

From 78f4e3c19680249c963ecae86bd94668ff9dbcdf Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Sun, 31 Jul 2022 20:34:56 +0300
Subject: [PATCH 2/2] the script has been reworked and tested

---
 src/components/breadcrumbs.tsx | 57 +++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/breadcrumbs.tsx b/src/components/breadcrumbs.tsx
index 90c9a4e..6a33655 100644
--- a/src/components/breadcrumbs.tsx
+++ b/src/components/breadcrumbs.tsx
@@ -1,21 +1,48 @@
-import { isArray } from "lodash";
-import React from "react";
+import React, { Children, ReactElement } from "react";
 
 type Props = {
-    divider?: string;
+    divider: "dotted" | "slash";
     children: React.ReactNode;
-}
-/* -------------------------------------------------------------------------- */
-/*       use: <Breadcrumbs divider="/","●" or any> children </Breadcrumbs>    */
-/* -------------------------------------------------------------------------- */
-export default function Breadcrumbs({divider ,children}: Props) {
-    return(
-             <>
-                {divider}&nbsp;{
+    className?: string;
+} ;
 
-                    isArray(children) ? children.join(' '+divider+' ') : children
-                }
-                &nbsp;{divider}
-            </>        
+/* ---------- a random number for a unique key (react requirement) ---------- */
+
+function randomInteger( min: number, max: number ) {
+    let rand = min + Math.random() * (max + 1 - min);
+    return Math.floor(rand);
+  }
+
+/* ----------------------- get the divider as designed ---------------------- */
+
+function GetDivider( symbol: string ) {
+    const dividers = {
+        'dotted' : <span className='inline-block h-1 w-1 bg-gray-500 rounded m-1 text-center' key={ randomInteger(20, 1000) }></span>,
+        'slash'  : <span className='fz-12 f-gray-700 m-1' key={ randomInteger(20, 1000) }>/</span>,
+    }
+    return ( symbol === 'dotted') ? dividers.dotted : dividers.slash    
+}
+
+export default function Breadcrumbs( { divider ,children, className }: Props ) {
+    
+    /* -------------- Convert the children into an array and insert ------------- */
+    /* ------------------the elements with the divider into it ------------------ */
+
+    let childrenToArray = React.Children.toArray(children)
+    let LinkAndDivider: any 
+    LinkAndDivider = [];
+    
+    for( let i = 0; i < childrenToArray.length; i++ ) {
+                 
+        let dividerComponent = GetDivider( divider ) 
+        LinkAndDivider = LinkAndDivider.concat( childrenToArray[i] ).concat( dividerComponent )
+    }
+    LinkAndDivider.pop();
+
+    return(
+            <div className={ className }> 
+                { LinkAndDivider }                   
+            </div>     
+            
     )
 }
\ No newline at end of file