53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Flex } from 'antd'
|
|
const Flag = ({
|
|
code,
|
|
size = 'middle',
|
|
hasBorder = false,
|
|
hasDropShadow = false,
|
|
borderRadius = 0
|
|
}) => {
|
|
const useRelativePath =
|
|
typeof window !== 'undefined' && window.location.href.includes('index.html')
|
|
var flagContainerStyle = {}
|
|
var flagStyle = {}
|
|
if (hasBorder == true) {
|
|
flagContainerStyle = {
|
|
...flagContainerStyle,
|
|
outline: '1px solid #8080805F',
|
|
outlineOffset: '-1px'
|
|
}
|
|
}
|
|
if (hasDropShadow == true) {
|
|
flagContainerStyle = {
|
|
...flagContainerStyle,
|
|
boxShadow: '0px 2px 10px 1px #82828242'
|
|
}
|
|
}
|
|
if (borderRadius > 0) {
|
|
flagContainerStyle = {
|
|
...flagContainerStyle,
|
|
borderRadius: `${borderRadius}px`
|
|
}
|
|
flagStyle = { ...flagStyle, borderRadius: `${borderRadius}px` }
|
|
}
|
|
return (
|
|
<Flex style={flagContainerStyle}>
|
|
<img
|
|
src={`${useRelativePath ? '.' : ''}/flags/${size}/${code}.svg`}
|
|
style={flagStyle}
|
|
/>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
Flag.propTypes = {
|
|
code: PropTypes.string.isRequired,
|
|
size: PropTypes.string,
|
|
hasBorder: PropTypes.bool,
|
|
hasDropShadow: PropTypes.bool,
|
|
borderRadius: PropTypes.number
|
|
}
|
|
|
|
export default Flag
|