diff --git a/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx b/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx new file mode 100644 index 00000000..c92c20d1 --- /dev/null +++ b/src/pages/PersonalizationAI/CreateButtonWithTooltip.tsx @@ -0,0 +1,112 @@ +import { Button, ClickAwayListener, Tooltip, useTheme } from "@mui/material"; +import { useState } from "react"; + +interface CreateButtonWithTooltipProps { + gender: string; + age: string; + ageError: boolean; + onClick: () => void; +} + +export default function CreateButtonWithTooltip({ + gender, + age, + ageError, + onClick +}: CreateButtonWithTooltipProps) { + const theme = useTheme(); + const [open, setOpen] = useState(false); + + const handleTooltipClose = () => { + setOpen(false); + }; + + const handleTooltipOpen = () => { + setOpen(true); + }; + + // Определяем причины неактивности кнопки + const getDisabledReasons = () => { + const reasons: string[] = []; + + if (!gender) { + reasons.push("выберите пол"); + } + + if (!age) { + reasons.push("заполните поле возраста"); + } + + if (ageError) { + reasons.push("исправьте ошибку в поле возраста"); + } + + return reasons; + }; + + const disabledReasons = getDisabledReasons(); + const isDisabled = !gender || !age || ageError; + const tooltipText = isDisabled + ? disabledReasons.length === 2 + ? disabledReasons.join(' и ') + : disabledReasons.join('\n') + : ''; + + return ( + +
+ {isDisabled && ( +
+ )} + + + +
+ + ); +} \ No newline at end of file diff --git a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx index 720022f3..765afb3d 100644 --- a/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx +++ b/src/pages/PersonalizationAI/GenderAndAgeSelector.tsx @@ -1,7 +1,8 @@ -import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, Button, useMediaQuery } from "@mui/material"; +import { Box, FormControl, FormLabel, Checkbox, FormControlLabel, useTheme, useMediaQuery } from "@mui/material"; import CheckboxIcon from "@icons/Checkbox"; import AgeInputWithSelect from "./AgeInputWithSelect"; import { useState, useEffect } from "react"; +import CreateButtonWithTooltip from "./CreateButtonWithTooltip"; interface GenderAndAgeSelectorProps { gender: string; @@ -190,23 +191,12 @@ export default function GenderAndAgeSelector({ - + /> ); } \ No newline at end of file