58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
import Box from "@mui/material/Box";
|
||
import { IconButton, Typography, useTheme } from "@mui/material";
|
||
import EditPencil from "@icons/EditPencil";
|
||
import { FC } from "react";
|
||
|
||
type SettingItemHeaderProps = {
|
||
title: string;
|
||
step: number;
|
||
setStep: () => void;
|
||
};
|
||
|
||
export const SettingItemHeader: FC<SettingItemHeaderProps> = ({
|
||
title,
|
||
step,
|
||
setStep,
|
||
}) => {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
color: theme.palette.grey2.main,
|
||
fontSize: "14px",
|
||
fontWeight: 400,
|
||
}}
|
||
>
|
||
{step} этап
|
||
</Typography>
|
||
<IconButton onClick={setStep}>
|
||
<EditPencil
|
||
color={theme.palette.brightPurple.main}
|
||
width={"18px"}
|
||
height={"18px"}
|
||
/>
|
||
</IconButton>
|
||
</Box>
|
||
<Typography
|
||
sx={{
|
||
color: theme.palette.grey3.main,
|
||
fontSize: "18px",
|
||
fontWeight: 500,
|
||
lineHeight: "1",
|
||
}}
|
||
>
|
||
{title}
|
||
</Typography>
|
||
</Box>
|
||
);
|
||
};
|