'init'

app/components/AuthFlowBreadcrumbs/AuthFlowBreadcrumbs.tsx

@@ -0,0 +1,30 @@
+import { Button, Flex, Text } from "@mantine/core";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useNavigate } from "react-router-dom";
+
+interface AuthFlowBreadcrumbsProps {
+    rightSection?: React.ReactNode;
+    title: string;
+}
+
+export function AuthFlowBreadcrumbs(props: AuthFlowBreadcrumbsProps) {
+    const navigate = useNavigate();
+
+    return (                    
+        <Flex w={'100%'} mih={50} justify={'space-between'} pl={'sm'} pr={'sm'} direction={'row'} align={'center'}>
+            <Flex align={'center'} justify={'flex-start'} style={{ flex: 1 }}>
+                <Button p={0} leftSection={
+                        <IconChevronLeft size={15}></IconChevronLeft>
+                    } color="red" onClick={() => navigate(-1)} variant="transparent">
+                        Back
+                </Button>
+            </Flex>
+            <Flex style={{ flex: 1 }} justify={'center'}>
+                <Text fw={500} ta={'center'} size={'sm'}>{props.title}</Text>
+            </Flex>
+            <Flex align={'center'} justify={'flex-end'} style={{ flex: 1 }}>
+                {props.rightSection}
+            </Flex>
+        </Flex>
+    );
+}