diff options
author | flu0r1ne <flu0r1ne@flu0r1ne.net> | 2023-09-06 19:53:23 -0500 |
---|---|---|
committer | flu0r1ne <flu0r1ne@flu0r1ne.net> | 2023-09-06 19:53:23 -0500 |
commit | ef4fb0a5277ee99bd0f1747b77e733ef7f02460d (patch) | |
tree | 2c7b306eaa814dedccb987a28a1cd050fdd94136 /components/PathCrumbs | |
parent | a66d6b395e22d6506319cc20b6dfab0e88cb0f39 (diff) | |
download | homepage-ef4fb0a5277ee99bd0f1747b77e733ef7f02460d.tar.xz homepage-ef4fb0a5277ee99bd0f1747b77e733ef7f02460d.zip |
Make BreadCrumbs domain agnostic
Diffstat (limited to 'components/PathCrumbs')
-rw-r--r-- | components/PathCrumbs/index.tsx | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/components/PathCrumbs/index.tsx b/components/PathCrumbs/index.tsx new file mode 100644 index 0000000..1c87344 --- /dev/null +++ b/components/PathCrumbs/index.tsx @@ -0,0 +1,60 @@ +import React, { FC } from 'react'; + +import assert from '../../utils/assert'; +import { DISPLAY_DOMAIN } from '../../utils/env'; + +const urlPathComponents = (path : string): string[] => { + assert(path.length > 0, "empty path"); + + let canonicalizedPath = path[path.length - 1] === '/' ? + path.substr(0, path.length - 1) : path; + + if(canonicalizedPath.length === 0) { + return []; + } else { + canonicalizedPath = canonicalizedPath[0] == '/' ? + path.substr(1, path.length - 1) : path; + } + + return canonicalizedPath.split('/') +} + +const urlPathComponentsToFullPath = (urlPathComponents : string[]): string[] => { + const fullPaths = new Array<string>(urlPathComponents.length + 1); + + fullPaths[0] = ''; + + for(let i = 0; i < urlPathComponents.length; i++) { + fullPaths[i + 1] = fullPaths[i] + '/' + urlPathComponents[i]; + } + + fullPaths[0] = '/'; + + return fullPaths; +}; + +export type PathCrumbsProps = { + path: string +}; + +import { BreadCrumbs , LinkCrumb } from '../../components/BreadCrumbs'; + +const PathCrumbs: FC<PathCrumbsProps> = ({ path }) => { + + const pathComponents = urlPathComponents(path); + const fullPaths = urlPathComponentsToFullPath(pathComponents); + + const linksComponents = fullPaths.map((fullPath, i) => ( + <LinkCrumb href={fullPath} key={fullPath}> + { i === 0 ? DISPLAY_DOMAIN : pathComponents[i - 1] } + </LinkCrumb> + )); + + return ( + <BreadCrumbs> + {linksComponents} + </BreadCrumbs> + ); +}; + +export default PathCrumbs; |