50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
import { ArrowBackIcon } from "@chakra-ui/icons";
|
|
import { Box, HStack, Icon, Text, VStack } from "@chakra-ui/react";
|
|
import React from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
const MiniHeader = ({ title, subTitle, backButton }) => {
|
|
const navigate = useNavigate();
|
|
const [firstPart, secondPart] = title && title?.split(/ (.+)/);
|
|
|
|
return (
|
|
<HStack gap={3} mb={4}>
|
|
{backButton && (
|
|
<Icon
|
|
boxShadow='md'
|
|
cursor={"pointer"}
|
|
onClick={() => navigate(-1)}
|
|
as={ArrowBackIcon}
|
|
boxSize={7}
|
|
bg={"#fff"}
|
|
p={1}
|
|
rounded={"full"}
|
|
/>
|
|
)}
|
|
<VStack alignItems={"start"} gap={1}>
|
|
<Box as="span" display={"flex"} gap={2}>
|
|
<Text fontSize={"lg"} as={"span"} fontWeight={600}>
|
|
{firstPart}
|
|
</Text>
|
|
|
|
<Text
|
|
bgGradient="linear(to-l, #3725EA, #5E0FCD)"
|
|
bgClip="text"
|
|
fontSize={"lg"}
|
|
as={"span"}
|
|
fontWeight={600}
|
|
>
|
|
{secondPart}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Text fontSize={"xs"} color={"gray.500"} fontWeight={500} as={"span"}>
|
|
{subTitle}
|
|
</Text>
|
|
</VStack>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default MiniHeader;
|