30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
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>
|
|
);
|
|
} |