Tom Butcher
6471434d81
- Added minWidth style to Flex and inner div elements to ensure proper alignment and prevent overflow issues in the CountryDisplay component.
40 lines
804 B
JavaScript
40 lines
804 B
JavaScript
import PropTypes from 'prop-types'
|
|
import { Flex, Typography } from 'antd'
|
|
import Flag from './Flag'
|
|
import countries from '../../../database/Countries'
|
|
|
|
const { Text } = Typography
|
|
|
|
const CountryDisplay = ({ countryCode }) => {
|
|
const country = countries.find((c) => c.code === countryCode)
|
|
|
|
if (!country) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Flex
|
|
gap={'small'}
|
|
align='center'
|
|
className='country-display'
|
|
style={{ minWidth: 0 }}
|
|
>
|
|
<Flag
|
|
code={country.code}
|
|
size='middle'
|
|
hasBorder={true}
|
|
borderRadius={5}
|
|
/>
|
|
<div style={{ minWidth: 0 }}>
|
|
<Text ellipsis>{country.name}</Text>
|
|
</div>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
CountryDisplay.propTypes = {
|
|
countryCode: PropTypes.string.isRequired
|
|
}
|
|
|
|
export default CountryDisplay
|