Можно выбрать оба пола

src/pages/PersonalizationAI/GenderAndAgeSelector.tsx

@@ -1,4 +1,4 @@
-import { Box, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
+import { Box, FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox, Select, MenuItem, useTheme, Button, useMediaQuery, IconButton } from "@mui/material";
 import { InfoPopover } from '@ui_kit/InfoPopover';
 import CheckboxIcon from "@icons/Checkbox";
 import { useState } from "react";
@@ -15,7 +15,7 @@ interface GenderAndAgeSelectorProps {
 export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelectorProps) {
   const theme = useTheme();
   const [age, setAge] = useState<string>('');
-  const [gender, setGender] = useState<string>('');
+  const [gender, setGender] = useState<string[]>([]);
   const [selectOpen, setSelectOpen] = useState<boolean>(false);
   const quiz = useCurrentQuiz();
   const { enqueueSnackbar } = useSnackbar();
@@ -32,7 +32,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       const [result, error] = await auditoryAdd({
         quizId: quiz.backendId,
         body: {
-          sex: gender === "male",
+          sex: gender.includes("male"),
           age
         }
       });
@@ -46,13 +46,13 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
         handleAdd({
           id: result.ID,
           quiz_id: quiz.backendId,
-          sex: gender === "male",
+          sex: gender.includes("male"),
           age,
           deleted: false,
         });
         enqueueSnackbar('Ссылка успешно добавлена', { variant: 'success' });
         // Очищаем форму
-        setGender('');
+        setGender([]);
         setAge('');
       }
     } catch (error) {
@@ -81,7 +81,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
               component="legend">Пол</FormLabel>
             <InfoPopover />
           </Box>
-          <RadioGroup
+          <FormGroup
             sx={{
               width: "155px",
               justifyContent: "space-between",
@@ -89,10 +89,6 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
               ml: "-9px"
             }}
             row
-            aria-label="gender"
-            name="row-radio-buttons-group"
-            value={gender}
-            onChange={(e) => setGender(e.target.value)}
           >
             <FormControlLabel
               sx={{
@@ -119,8 +115,20 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 },
                 m: 0,
               }}
-              value="male"
-              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
+              control={
+                <Checkbox 
+                  checked={gender.includes('male')}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setGender([...gender, 'male']);
+                    } else {
+                      setGender(gender.filter(g => g !== 'male'));
+                    }
+                  }}
+                  icon={<CheckboxIcon />}
+                  checkedIcon={<CheckboxIcon checked />}
+                />
+              }
               label="М"
             />
             <FormControlLabel
@@ -147,11 +155,23 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
                 },
                 m: 0,
               }}
-              value="female"
-              control={<Radio icon={<CheckboxIcon />} checkedIcon={<CheckboxIcon checked />} />}
+              control={
+                <Checkbox 
+                  checked={gender.includes('female')}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setGender([...gender, 'female']);
+                    } else {
+                      setGender(gender.filter(g => g !== 'female'));
+                    }
+                  }}
+                  icon={<CheckboxIcon />}
+                  checkedIcon={<CheckboxIcon checked />}
+                />
+              }
               label="Ж"
             />
-          </RadioGroup>
+          </FormGroup>
         </FormControl>
 
         <FormControl sx={{ maxWidth: "420px", width: "100%", marginLeft: isMobile ? "0" : "120px", minWidth: "265px" }} variant="filled">
@@ -178,7 +198,7 @@ export default function GenderAndAgeSelector({ handleAdd }: GenderAndAgeSelector
       <Button
         onClick={addItem}
         variant="contained"
-        disabled={!gender || !age || ageError}
+        disabled={gender.length === 0 || !age || ageError}
         sx={{
           bgcolor: theme.palette.brightPurple.main,
           borderRadius: "8px",

src/pages/PersonalizationAI/GenderButton.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import MaleIcon from '@mui/icons-material/Male';
+import FemaleIcon from '@mui/icons-material/Female';
+import PeopleIcon from '@mui/icons-material/People';
+
+interface GenderButtonProps {
+  selected: boolean;
+  onClick: () => void;
+  icon: 'male' | 'female' | 'both';
+  label: string;
+}
+
+export const GenderButton: React.FC<GenderButtonProps> = ({ selected, onClick, icon, label }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const getIcon = () => {
+    switch (icon) {
+      case 'male':
+        return <MaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
+      case 'female':
+        return <FemaleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
+      case 'both':
+        return <PeopleIcon sx={{ fontSize: isMobile ? '20px' : '24px' }} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Box
+      onClick={onClick}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: isMobile ? '8px 12px' : '10px 16px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        bgcolor: selected ? theme.palette.brightPurple.main : 'transparent',
+        border: `1px solid ${selected ? theme.palette.brightPurple.main : theme.palette.grey[300]}`,
+        '&:hover': {
+          bgcolor: selected ? theme.palette.brightPurple.main : theme.palette.grey[100],
+        },
+      }}
+    >
+      {getIcon()}
+      <Typography
+        sx={{
+          fontSize: isMobile ? '14px' : '16px',
+          fontWeight: 500,
+          color: selected ? theme.palette.common.white : theme.palette.text.primary,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+}; 

src/pages/PersonalizationAI/GenderSelector.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { useMediaQuery } from '@mui/material';
+import { InfoPopover } from './InfoPopover';
+import { GenderButton } from './GenderButton';
+
+interface GenderSelectorProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+}
+
+export const GenderSelector: React.FC<GenderSelectorProps> = ({ value, onChange }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const handleGenderClick = (gender: string) => {
+    if (value.includes(gender)) {
+      onChange(value.filter(g => g !== gender));
+    } else {
+      onChange([...value, gender]);
+    }
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <Typography
+          sx={{
+            fontSize: isMobile ? '14px' : '16px',
+            fontWeight: 500,
+            color: theme.palette.text.primary,
+          }}
+        >
+          Пол
+        </Typography>
+        <InfoPopover />
+      </Box>
+      <Box sx={{ display: 'flex', gap: '8px' }}>
+        <GenderButton
+          selected={value.includes('male')}
+          onClick={() => handleGenderClick('male')}
+          icon="male"
+          label="Мужской"
+        />
+        <GenderButton
+          selected={value.includes('female')}
+          onClick={() => handleGenderClick('female')}
+          icon="female"
+          label="Женский"
+        />
+      </Box>
+    </Box>
+  );
+};