feat(design): home page new design and functionality #135
105
src/components/Select/index.tsx
Normal file
105
src/components/Select/index.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import {
|
||||
FormControl,
|
||||
MenuItem,
|
||||
Select as SelectMui,
|
||||
SelectChangeEvent,
|
||||
styled,
|
||||
SelectProps as SelectMuiProps,
|
||||
MenuItemProps
|
||||
} from '@mui/material'
|
||||
|
||||
const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
|
||||
backgroundColor: 'var(--primary-main)',
|
||||
fontSize: '14px',
|
||||
fontWeight: '500',
|
||||
color: 'white',
|
||||
':hover': {
|
||||
backgroundColor: 'var(--primary-light)'
|
||||
},
|
||||
'& .MuiSelect-select:focus': {
|
||||
backgroundColor: 'var(--primary-light)'
|
||||
},
|
||||
'& .MuiSvgIcon-root': {
|
||||
color: 'white'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: 'none'
|
||||
}
|
||||
}))
|
||||
|
||||
const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
|
||||
marginInline: '5px',
|
||||
borderRadius: '4px',
|
||||
'&:hover': {
|
||||
background: 'var(--primary-light)',
|
||||
color: 'white'
|
||||
},
|
||||
'&.Mui-selected': {
|
||||
background: 'var(--primary-dark)',
|
||||
color: 'white'
|
||||
},
|
||||
'&.Mui-selected:hover': {
|
||||
background: 'var(--primary-light)'
|
||||
},
|
||||
'&.Mui-selected.Mui-focusVisible': {
|
||||
background: 'var(--primary-light)',
|
||||
color: 'white'
|
||||
},
|
||||
'&.Mui-focusVisible': {
|
||||
background: 'var(--primary-light)',
|
||||
color: 'white'
|
||||
},
|
||||
'& + *': {
|
||||
marginTop: '5px'
|
||||
}
|
||||
}))
|
||||
|
||||
interface SelectItemProps<T extends string> {
|
||||
value: T
|
||||
label: string
|
||||
}
|
||||
|
||||
interface SelectProps<T extends string> {
|
||||
setValue: React.Dispatch<React.SetStateAction<T>>
|
||||
options: SelectItemProps<T>[]
|
||||
}
|
||||
|
||||
export function Select<T extends string>({
|
||||
setValue,
|
||||
options
|
||||
}: SelectProps<T>) {
|
||||
const handleChange = (event: SelectChangeEvent<unknown>) => {
|
||||
setValue(event.target.value as T)
|
||||
}
|
||||
|
||||
return (
|
||||
<FormControl>
|
||||
<SelectCustomized
|
||||
size="small"
|
||||
variant="outlined"
|
||||
defaultValue={options[0].value as string}
|
||||
onChange={handleChange}
|
||||
MenuProps={{
|
||||
MenuListProps: {
|
||||
sx: {
|
||||
paddingBlock: '5px'
|
||||
}
|
||||
},
|
||||
PaperProps: {
|
||||
sx: {
|
||||
boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
{options.map((o) => {
|
||||
return (
|
||||
<MenuItemCustomized key={o.label} value={o.value as string}>
|
||||
{o.label}
|
||||
</MenuItemCustomized>
|
||||
)
|
||||
})}
|
||||
</SelectCustomized>
|
||||
</FormControl>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user