46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
|
import { Box, Button, darken, Flex, lighten, Text, useComputedColorScheme } from "@mantine/core";
|
|
import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import classes from './Breadcrumbs.module.css'
|
|
|
|
export interface BreadcrumbsProps {
|
|
text: string;
|
|
onClick?: () => void;
|
|
rightSection?: React.ReactNode;
|
|
}
|
|
|
|
export function Breadcrumbs(props : BreadcrumbsProps) {
|
|
const {chevrons} = useRosettaColors();
|
|
const colorScheme = useComputedColorScheme();
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<>
|
|
<Box w={'100%'} h={50}>
|
|
<Flex p={'sm'} h={'100%'} align={'center'} justify={'space-between'}>
|
|
<Flex align={'center'}>
|
|
<Box>
|
|
<Button className={classes.history_button} onClick={() => navigate(-1)} c={chevrons.active} variant={'subtle'} p={5}>
|
|
<IconChevronLeft></IconChevronLeft>
|
|
</Button>
|
|
|
|
<Button className={classes.history_button_disabled}
|
|
c={chevrons.disabled} variant={'subtle'} p={5}>
|
|
<IconChevronRight></IconChevronRight>
|
|
</Button>
|
|
|
|
</Box>
|
|
<Box ml={'sm'}>
|
|
<Text fw={'bold'} c={colorScheme == 'light' ? darken(chevrons.active, 0.6) : lighten(chevrons.active, 0.6)} size={'sm'}>{props.text}</Text>
|
|
</Box>
|
|
</Flex>
|
|
<Box>
|
|
{props.onClick && (<Button onClick={props.onClick} p={0} pr={6} variant={'transparent'}>Save</Button>)}
|
|
{props.rightSection}
|
|
</Box>
|
|
</Flex>
|
|
</Box>
|
|
</>
|
|
)
|
|
} |