aboutsummaryrefslogtreecommitdiff
path: root/components/PathCrumbs
diff options
context:
space:
mode:
Diffstat (limited to 'components/PathCrumbs')
-rw-r--r--components/PathCrumbs/index.tsx60
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;