git.iko.soy/bridge
on 04765bb help sign in
bridge/src/components/old/Header.js
62 lines 1.5 kB history raw
1import React from 'react';
2import { Button } from './Base';
4import { getRouteBreadcrumb } from '../../lib/router';
5import { ROUTE_NAMES } from '../../lib/routeNames';
6import { useHistory } from '../../store/history';
7import { isLast } from '../../lib/lib';
8import { usePointCursor } from '../../store/pointCursor';
10// hook to create a breadcrumb builder function based on the current
11// global states
12function useRouteBreadcrumbBuilder() {
13 const { pointCursor } = usePointCursor();
15 return getRouteBreadcrumb({ pointCursor });
18function Crumbs(props) {
19 const history = useHistory();
20 const breadcrumbBuilder = useRouteBreadcrumbBuilder();
22 return (
23 <>
24 {history.routes.map((route, idx) => {
25 return (
26 <div key={`history-${idx}`} className={'flex items-center'}>
27 <Button
28 prop-type={'link'}
29 prop-size={'sm'}
30 onClick={() => history.pop(history.size - idx - 1)}>
31 {breadcrumbBuilder(route)}
32 </Button>
34 {isLast(history.size, idx) ? <div /> : '/'}
35 </div>
36 );
37 })}
38 </>
39 );
42function Header(props) {
43 const history = useHistory();
45 const showCrumbs = !history.includes(ROUTE_NAMES.INVITE_TICKET);
47 if (showCrumbs) {
48 return (
49 <div className={'flex items-center h-10'}>
50 <Crumbs />
51 </div>
52 );
53 }
55 return (
56 <h2 className="mt-9 clickable" onClick={() => history.pop()}>
57 Bridge
58 </h2>
59 );
62export default Header;