Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 2x 34x 34x 34x 34x | import { DialogTitle, Stack } from "@mui/material";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import { XIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
type THeaderTitleComponent = {
title: string | React.ReactNode;
description?: string;
onClick: () => void;
};
const EditProfileImageHeader = (props: THeaderTitleComponent) => {
const { title, onClick, description } = props;
return (
<Container>
<Stack spacing="4px">
<GiveText color="primary" variant="bodyL">
{title}
</GiveText>
{description && (
<GiveText color="secondary" variant="bodyS">
{description}
</GiveText>
)}
</Stack>
<CloseButton
aria-label="close"
onClick={onClick}
Icon={XIcon}
variant="ghost"
/>
</Container>
);
};
const Container = styled(DialogTitle)(() => ({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
height: "fit-content !important",
}));
const CloseButton = styled(GiveIconButton)(() => ({
alignSelf: "flex-start",
}));
export default EditProfileImageHeader;
|