61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
};
|