SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

поправила шапки в разных состояниях(убрала комментарии в них), адаптация окон загрузки и редактирования изображения + мелкие правки по дизайну

Browse Source
This commit is contained in:
Tamara 2024-01-04 18:18:29 +03:00
parent d35b65fc05
commit b1e1817685
19 changed files with 343 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -108,38 +108,38 @@ export const AnswerItem = ({
),
endAdornment: (
<InputAdornment position="end">
<IconButton
sx={{ padding: "0" }}
aria-describedby="my-popover-id"
onClick={handleClick}
>
<MessageIcon
style={{
color: "#9A9AAF",
fontSize: "30px",
marginRight: "6.5px",
}}
/>
</IconButton>
<Popover
id="my-popover-id"
open={isOpen}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
>
<TextareaAutosize
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
value={variant.hints}
onChange={(e) =>
setQuestionVariantAnswer(e.target.value || " ")
}
onKeyDown={(
event: KeyboardEvent<HTMLTextAreaElement>,
) => event.stopPropagation()}
/>
</Popover>
{/*<IconButton*/}
{/* sx={{ padding: "0" }}*/}
{/* aria-describedby="my-popover-id"*/}
{/* onClick={handleClick}*/}
{/*>*/}
{/* <MessageIcon*/}
{/* style={{*/}
{/* color: "#9A9AAF",*/}
{/* fontSize: "30px",*/}
{/* marginRight: "6.5px",*/}
{/* }}*/}
{/* />*/}
{/*</IconButton>*/}
{/*<Popover*/}
{/* id="my-popover-id"*/}
{/* open={isOpen}*/}
{/* anchorEl={anchorEl}*/}
{/* onClose={handleClose}*/}
{/* anchorOrigin={{ vertical: "bottom", horizontal: "left" }}*/}
{/*>*/}
{/* <TextareaAutosize*/}
{/* style={{ margin: "10px" }}*/}
{/* placeholder="Подсказка для этого ответа"*/}
{/* value={variant.hints}*/}
{/* onChange={(e) =>*/}
{/* setQuestionVariantAnswer(e.target.value || " ")*/}
{/* }*/}
{/* onKeyDown={(*/}
{/* event: KeyboardEvent<HTMLTextAreaElement>,*/}
{/* ) => event.stopPropagation()}*/}
{/* />*/}
{/*</Popover>*/}
<IconButton
sx={{ padding: "0" }}
onClick={() =>

2
src/pages/Questions/DataOptions/settingData.tsx
View File

@ -75,7 +75,7 @@ export default function SettingsData({ question }: SettingsDataProps) {
</Box> */}
<Box
sx={{
pt: isMobile ? "0px" : "20px",
pt: "20px",
pb: "20px",
pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
pr: isFigmaTablte ? "19px" : "20px",

4
src/pages/Questions/DropDown/settingDropDown.tsx
View File

@ -47,8 +47,8 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
>
<Box
sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pt: isMobile ? "0" : "20px",
pb: isMobile ? "0" : "20px",
pl: "20px",
display: "flex",
flexDirection: "column",

2
src/pages/Questions/Emoji/settingEmoji.tsx
View File

@ -74,7 +74,7 @@ export default function SettingEmoji({ question }: SettingEmojiProps) {
</Box> */}
<Box
sx={{
pt: isMobile ? "0px" : "20px",
pt: "20px",
pb: "20px",
pl: "20px",
pr: isFigmaTablte ? "30px" : "20px",

4
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -92,8 +92,8 @@ export default function QuestionsPageCard({
boxShadow: "none",
paddingBottom: "20px",
borderRadius: "0",
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
borderTopLeftRadius: questionIndex == 0 ? "12px" : 0,
borderTopRightRadius: questionIndex == 0 ? "12px" : 0,
}}
>
<Box

2
src/pages/Questions/OwnTextField/settingTextField.tsx
View File

@ -126,7 +126,7 @@ export default function SettingTextField({ question }: SettingTextFieldProps) {
</Box> */}
<Box
sx={{
pt: isMobile ? "0px" : "20px",
pt: "20px",
pb: "20px",
pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
pr: "20px",

136
src/pages/Questions/PageOptions/PageOptions.tsx
View File

@ -1,5 +1,18 @@
import { Box, useMediaQuery, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import {
Box,
Button,
IconButton,
Modal,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import {
copyQuestion,
deleteQuestion,
deleteQuestionWithTimeout,
updateQuestion,
} from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import { useState } from "react";
@ -8,6 +21,12 @@ import type { QuizQuestionPage } from "../../../model/questionTypes/page";
import ButtonsOptions from "../ButtonsOptions";
import SwitchPageOptions from "./switchPageOptions";
import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";
import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { DeleteFunction } from "@utils/deleteFunc";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
type Props = {
disableInput?: boolean;
@ -29,6 +48,14 @@ export default function PageOptions({ disableInput, question }: Props) {
});
}, 200);
const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore.getState();
const [openDelete, setOpenDelete] = useState<boolean>(false);
const openedModal = () => {
updateDesireToOpenABranchingModal(question.content.id);
};
const SSHC = (data: string) => {
setSwitchState(data);
};
@ -59,12 +86,105 @@ export default function PageOptions({ disableInput, question }: Props) {
<MediaSelectionAndDisplay resultData={question} />
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={SSHC}
question={question}
/>
<SwitchPageOptions switchState={switchState} question={question} />
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "end",
width: "100%",
background: "#f2f3f7",
height: isMobile ? "92px" : "70px",
}}
>
<Box
sx={{
padding: "20px",
display: "flex",
gap: "6px",
}}
>
{/* <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
<HideIcon style={{ color: "#4D4D4D" }} />
</IconButton> */}
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => copyQuestion(question.id, question.quizId)}
>
<CopyIcon color={"#4D4D4D"} />
</IconButton>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
if (question.type === null) {
deleteQuestion(question.id);
}
if (question.content.rule.parentId.length !== 0) {
setOpenDelete(true);
} else {
deleteQuestionWithTimeout(question.id, () =>
DeleteFunction(questions, question, quiz),
);
}
}}
data-cy="delete-question"
>
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
<Modal open={openDelete} onClose={() => setOpenDelete(false)}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
padding: "30px",
borderRadius: "10px",
background: "#FFFFFF",
}}
>
<Typography variant="h6" sx={{ textAlign: "center" }}>
Вы удаляете вопрос, участвующий в ветвлении. Все его потомки
потеряют данные ветвления. Вы уверены, что хотите удалить
вопрос?
</Typography>
<Box
sx={{
marginTop: "30px",
display: "flex",
justifyContent: "center",
gap: "15px",
}}
>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => setOpenDelete(false)}
>
Отмена
</Button>
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => {
deleteQuestionWithTimeout(question.id, () =>
DeleteFunction(questions, question, quiz),
);
}}
>
Подтвердить
</Button>
</Box>
</Box>
</Modal>
</Box>
</Box>
{/*<ButtonsOptions*/}
{/* switchState={switchState}*/}
{/* SSHC={SSHC}*/}
{/* question={question}*/}
{/*/>*/}
{/*<SwitchPageOptions switchState={switchState} question={question} />*/}
</>
);
}

28
src/pages/Questions/QuestionsPage.tsx
View File

@ -62,19 +62,21 @@ export default function QuestionsPage({
<Typography variant={"h5"}>
{quiz.name ? quiz.name : "Заголовок quiz"}
</Typography>
<Button
sx={{
fontSize: "16px",
lineHeight: "19px",
padding: 0,
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
onClick={collapseAllQuestions}
>
Свернуть всё
</Button>
{!openBranchingPage && (
<Button
sx={{
fontSize: "16px",
lineHeight: "19px",
padding: 0,
textDecoration: "underline",
color: theme.palette.brightPurple.main,
textDecorationColor: theme.palette.brightPurple.main,
}}
onClick={collapseAllQuestions}
>
Свернуть всё
</Button>
)}
</Box>
<QuestionSwitchWindowTool
openBranchingPage={openBranchingPage}

11
src/pages/Questions/UploadFile/settingUpload.tsx
View File

@ -38,7 +38,16 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
width: isMobile ? "auto" : "100%",
}}
>
<Typography>Настройки вопроса</Typography>
<Typography
sx={{
height: isMobile ? "18px" : "auto",
fontWeight: "500",
fontSize: "18px",
color: " #4D4D4D",
}}
>
Настройки вопросов
</Typography>
{/* <CustomCheckbox
sx={{
display: isMobile ? "flex" : "block",

8
src/pages/Questions/UploadImage/UploadImageModal.tsx
View File

@ -6,6 +6,7 @@ import {
Modal,
TextField,
InputAdornment,
useMediaQuery,
} from "@mui/material";
import UploadIcon from "../../../assets/icons/UploadIcon";
import SearchIcon from "../../../assets/icons/SearchIcon";
@ -32,7 +33,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
const theme = useTheme();
const dropZone = useRef<HTMLDivElement>(null);
const [ready, setReady] = useState(false);
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
event.preventDefault();
setReady(true);
@ -65,7 +66,7 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
maxWidth: "690px",
maxWidth: isMobile ? "300px" : "690px",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
@ -106,13 +107,14 @@ export const UploadImageModal: React.FC<ModalkaProps> = ({
ref={dropZone}
sx={{
width: "580px",
padding: "33px 10px 33px 55px",
padding: isMobile ? "33px" : "33px 10px 33px 55px",
display: "flex",
alignItems: "center",
backgroundColor: theme.palette.background.default,
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
borderRadius: "8px",
gap: "55px",
flexDirection: isMobile ? "column" : undefined,
}}
onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
>

2
src/pages/Questions/answerOptions/responseSettings.tsx
View File

@ -98,7 +98,7 @@ export default function ResponseSettings({ question }: Props) {
<Box
sx={{
boxSizing: "border-box",
pt: isMobile ? "0px" : "20px",
pt: "20px",
pb: "20px",
pl: isFigmaTablte ? (isTablet ? "20px" : "34px") : "28px",
pr: isFigmaTablte ? "19px" : "20px",

5
src/pages/createQuize/MyQuizzesFull.tsx
View File

@ -37,7 +37,10 @@ export default function MyQuizzesFull({
{quizes.length === 0 ? (
<FirstQuiz />
) : (
<SectionWrapper maxWidth="lg">
<SectionWrapper
maxWidth="lg"
sx={{ padding: isMobile ? "0 16px" : "20px" }}
>
<Box
sx={{
display: "flex",

1
src/pages/createQuize/QuizCard.tsx
View File

@ -67,6 +67,7 @@ export default function QuizCard({
overflow: "hidden",
whiteSpace: "nowrap",
widows: "100%",
maxWidth: "280px",
}}
variant="h5"
>

2
src/pages/main.tsx
View File

@ -63,7 +63,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) {
getData();
}, []);
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const isMobileSm = useMediaQuery(theme.breakpoints.down(370));
const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
const isLinkButton = useMediaQuery(theme.breakpoints.down(708));

93
src/ui_kit/Header/Header.tsx
View File

@ -35,7 +35,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
const theme = useTheme();
const navigate = useNavigate();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(600));
const isMobile = useMediaQuery(theme.breakpoints.down(650));
async function handleLogoutClick() {
const [, logoutError] = await logout();
@ -65,7 +65,11 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
}}
>
<Link to="/" style={{ display: "flex" }}>
{isMobile ? <Logotip width={100} /> : <Logotip width={124} />}
{isMobile ? (
<Logotip width={100} color={"white"} />
) : (
<Logotip width={124} />
)}
</Link>
<Box
sx={{
@ -89,7 +93,7 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
}
fullWidth
id="project-name"
placeholder="Название проекта окно"
placeholder="Название проекта"
sx={{
width: "270px",
"& .MuiInputBase-root": {
@ -114,67 +118,32 @@ export const Header = ({ setMobileSidebar }: HeaderProps) => {
/>
</FormControl>
</Box>
{isTablet ? (
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
{isMobile ? (
<Burger
onClick={() => setMobileSidebar((visible: boolean) => !visible)}
style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
/>
) : (
<Box>
{/* <CustomAvatar
sx={{
ml: "11px",
backgroundColor: theme.palette.orange.main,
height: "36px",
width: "36px",
}}
/> */}
</Box>
)}
</Box>
) : (
<>
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
ml: "20px",
}}
>
{/* <NavMenuItem text="Редактировать" isActive /> */}
{/* <NavMenuItem text="Заявки" />
<NavMenuItem text="Аналитика" />
<NavMenuItem text="История" />
<NavMenuItem text="Помощь" /> */}
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
gap: "15px",
}}
>
{/* <CustomAvatar
<Box
sx={{
display: "flex",
ml: "auto",
}}
>
{isMobile ? (
<Burger
onClick={() => setMobileSidebar((visible: boolean) => !visible)}
style={{ fontSize: "30px", color: "white", cursor: "pointer" }}
/>
) : (
<>
<Box
sx={{
ml: "11px",
backgroundColor: theme.palette.orange.main,
height: "36px",
width: "36px",
display: "flex",
ml: "auto",
gap: "15px",
}}
/> */}
<LogoutButton onClick={handleLogoutClick} />
</Box>
<ToTariffsButton />
</>
)}
>
<LogoutButton onClick={handleLogoutClick} />
</Box>
<ToTariffsButton />
</>
)}
</Box>
</Container>
);
};

65
src/ui_kit/Header/HeaderFull.tsx
View File

@ -48,18 +48,12 @@ export default function HeaderFull() {
height: "80px",
alignItems: "center",
gap: isTablet ? "20px" : "60px",
flexDirection: isMobile ? "row-reverse" : "row",
flexDirection: "row",
justifyContent: isMobile ? "space-between" : "center",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
>
{isTablet && (
<Burger
// onClick={() => setMobileSidebar(!mobileSidebar)}
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
/>
)}
<Link to="/">
<Logotip width={124} />
</Link>
@ -70,56 +64,15 @@ export default function HeaderFull() {
gap: "30px",
overflow: "hidden",
}}
>
{/* <NavMenuItem text="Квизы" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" /> */}
</Box>
></Box>
)}
<Box sx={{ display: isMobile ? "none" : "flex", ml: "auto" }}>
{/* {!isTablet && (
<>
<IconButton sx={{ p: 0 }}>
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
</IconButton>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
<Typography
sx={{
fontSize: "12px",
lineHeight: "14px",
color: theme.palette.grey3.main,
}}
>
Мой баланс
</Typography>
<Typography variant="body2" color={theme.palette.brightPurple.main}>
00.00 руб.
</Typography>
</Box>
</>
)} */}
{!isMobile && (
<>
{/* <CustomAvatar
sx={{
ml: "27px",
backgroundColor: theme.palette.orange.main,
height: "36px",
width: "36px",
}}
/> */}
<LogoutButton
onClick={handleLogoutClick}
sx={{
ml: "20px",
}}
/>
</>
)}
<Box sx={{ display: "flex", ml: "auto" }}>
<LogoutButton
onClick={handleLogoutClick}
sx={{
ml: "20px",
}}
/>
</Box>
<ToTariffsButton />
</Container>

9
src/ui_kit/Modal/CropModal.tsx
View File

@ -170,6 +170,10 @@ export const CropModal: FC<Props> = ({
padding: "20px",
borderRadius: "8px",
width: isMobile ? "343px" : "620px",
height: isMobile ? "80vh" : undefined,
display: isMobile ? "flex" : undefined,
flexDirection: isMobile ? "column" : undefined,
justifyContent: isMobile ? "space-evenly" : undefined,
}}
>
<Box
@ -258,7 +262,7 @@ export const CropModal: FC<Props> = ({
sx={[
styleSlider,
{
width: isMobile ? "350px" : "250px",
width: isMobile ? undefined : "250px",
},
]}
value={scale * 100}
@ -278,7 +282,7 @@ export const CropModal: FC<Props> = ({
sx={[
styleSlider,
{
width: isMobile ? "350px" : "250px",
width: isMobile ? undefined : "250px",
},
]}
value={darken}
@ -295,6 +299,7 @@ export const CropModal: FC<Props> = ({
width: "100%",
display: "flex",
gap: "10px",
flexWrap: isMobile ? "wrap" : undefined,
}}
>
<Button

6
src/ui_kit/Sidebar.tsx
View File

@ -10,6 +10,7 @@ import { useState } from "react";
import MenuItem from "./MenuItem";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useLocation, useNavigate } from "react-router-dom";
import { setCurrentStep } from "@root/quizes/actions";
const quizSettingsMenuItems = [
[TagIcon, "Дополнения"],
@ -147,7 +148,10 @@ export default function Sidebar({ changePage, disableCollapse }: SidebarProps) {
)}
<List disablePadding>
<MenuItem
onClick={() => navigate("/design")}
onClick={() => {
navigate("/design");
setCurrentStep(15);
}}
text={"Дизайн"}
isCollapsed={isMenuCollapsed}
isActive={currentStep === 6}

105
src/ui_kit/Sidebar/SidebarMobile.tsx
View File

@ -1,5 +1,12 @@
import { FC, useState } from "react";
import { Box, Popper, Typography } from "@mui/material";
import { FC, useEffect, useRef, useState } from "react";
import {
Box,
FormControl,
IconButton,
Popper,
TextField,
Typography,
} from "@mui/material";
import { People } from "@mui/icons-material";
import { SidebarModal } from "./SidebarModal";
@ -12,6 +19,9 @@ import { Settings } from "./icons/Settings";
import { Pencil } from "./icons/Pencil";
import { ArrowDown } from "./icons/ArrowDown";
import Sidebar from "@ui_kit/Sidebar";
import { Link, useNavigate } from "react-router-dom";
import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
interface Iprops {
open: boolean;
@ -32,14 +42,25 @@ const quizSetupSteps = [
export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const [inputOpen, setInputOpen] = useState<boolean>(false);
const quiz = useCurrentQuiz();
const ref = useRef(null);
const handleClick = (event) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const clickInput = (event) => {
if (ref.current && !ref.current.contains(event.target)) setInputOpen(false);
};
useEffect(() => {
document.addEventListener("mousedown", clickInput);
return () => {
document.removeEventListener("mousedown", clickInput);
};
}, []);
const openPopper = Boolean(anchorEl);
const id = openPopper ? "simple-popper" : undefined;
return (
<Box
sx={{
@ -54,27 +75,75 @@ export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => {
}}
>
<Box sx={{ display: "flex", alignItems: "center", position: "relative" }}>
<BackArrowIcon color="white" />
<Link to="/list">
<IconButton sx={{ p: "6px" }}>
<BackArrowIcon color={"white"} />
</IconButton>
</Link>
<Box sx={{ ml: "15px", display: "flex", alignItems: "end" }}>
<Box
sx={{
ml: "15px",
display: "flex",
alignItems: "end",
width: "100%",
justifyContent: "space-between",
}}
>
<Box>
<Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>
Название
</Typography>
<Typography
sx={{ color: "#FFF", fontSize: "18px", fontWeight: "500" }}
>
Название проекта
</Typography>
{inputOpen ? (
<FormControl fullWidth variant="standard">
<TextField
ref={ref}
value={quiz.name}
onChange={(e) =>
updateQuiz(quiz.id, (quiz) => {
quiz.name = e.target.value;
})
}
fullWidth
id="project-name"
placeholder="Название проекта"
sx={{
width: "270px",
"& .MuiInputBase-root": {
height: "34px",
borderRadius: "8px",
p: 0,
},
}}
inputProps={{
sx: {
height: "20px",
borderRadius: "8px",
fontSize: "16px",
lineHeight: "20px",
p: "7px",
color: "white",
"&::placeholder": {
opacity: 1,
},
},
}}
/>
</FormControl>
) : (
<Typography color={"white"}>{quiz.name}</Typography>
)}
</Box>
<Pencil
style={{
position: "absolute",
right: "0",
color: "white",
fontSize: "24px",
}}
/>
<IconButton onClick={() => setInputOpen(true)}>
<Pencil
style={{
position: "absolute",
right: "0",
color: "white",
fontSize: "24px",
}}
/>
</IconButton>
</Box>
</Box>
<Box