@@ -9,29 +9,29 @@ import { isLast } from '../lib/lib';
99function Crumbs(props) {
1010 const history = useHistory();
1111
12− // FIXME probably more straightforward to render them normally and just
13− // return the reversed array of renders
14− const rendered = history.routes.map((route, idx) => {
15− return (
16− <div className={'flex items-center'} key={`history-${idx}`}>
17− <Button
18− prop-type={'link'}
19− prop-size={'sm'}
20− key={`history-button-${idx}`}
21− onClick={() => history.pop(history.size - idx - 1)}>
22− {getRouteBreadcrumb(props, route)}
23− </Button>
24−
25− {isLast(history.size, idx) ? (
26− <div />
27− ) : (
28− <Chevron className={'h-4 mh-2'} />
29− )}
30− </div>
31− );
32− });
33−
34− return rendered;
12+ return (
13+ <>
14+ {history.routes.map((route, idx) => {
15+ return (
16+ <div key={`history-${idx}`} className={'flex items-center'}>
17+ <Button
18+ prop-type={'link'}
19+ prop-size={'sm'}
20+ key={`history-button-${idx}`}
21+ onClick={() => history.pop(history.size - idx - 1)}>
22+ {getRouteBreadcrumb(props, route)}
23+ </Button>
24+
25+ {isLast(history.size, idx) ? (
26+ <div />
27+ ) : (
28+ <Chevron className={'h-4 mh-2'} />
29+ )}
30+ </div>
31+ );
32+ })}
33+ </>
34+ );
3535}
3636
3737function Header(props) {