'init'

app/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,14 @@
+.history_button {
+    @mixin hover {
+        @mixin light {
+            background-color: var(--mantine-color-gray-0);
+        }
+        @mixin dark {
+            background-color: var(--mantine-color-dark-6);
+        }
+    }
+}
+
+.history_button_disabled {
+    background-color: unset!important; 
+}

app/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,46 @@
+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>
+        </>
+    )
+}