48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import React, { Children, ReactElement } from "react";
|
|
|
|
type Props = {
|
|
divider: "dotted" | "slash";
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
} ;
|
|
|
|
/* ---------- 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>
|
|
|
|
)
|
|
} |