45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { Alert, Box, styled } from '@mui/material'
|
|
import { StyledAlertProps } from './types'
|
|
import { BORDER_STYLES } from './const'
|
|
import { forwardRef } from 'react'
|
|
|
|
export const StyledAlert = styled(
|
|
forwardRef<HTMLDivElement, StyledAlertProps>((props, ref) => <Alert {...props} ref={ref} icon={false} />)
|
|
)(({ alertvariant }) => ({
|
|
width: '100%',
|
|
maxHeight: 56,
|
|
padding: '0.5rem 1rem',
|
|
backgroundColor: '#FFF',
|
|
borderRadius: 4,
|
|
border: `solid ${BORDER_STYLES[alertvariant]} 1px`,
|
|
color: BORDER_STYLES[alertvariant],
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
'& .MuiAlert-message': {
|
|
display: 'flex',
|
|
minWidth: '100%',
|
|
justifyContent: 'space-between',
|
|
overflow: 'hidden',
|
|
padding: 0,
|
|
},
|
|
}))
|
|
|
|
export const StyledContainer = styled(Box)(() => ({
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
gap: '1rem',
|
|
width: '100%',
|
|
'& > .MuiTypography-root': {
|
|
flex: 1,
|
|
width: '100%',
|
|
wordBreak: 'break-word',
|
|
display: '-webkit-box',
|
|
WebkitLineClamp: 2,
|
|
WebkitBoxOrient: 'vertical',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
fontWeight: 500,
|
|
},
|
|
}))
|