fix(ui): country flag in replayer

This commit is contained in:
Shekar Siri 2023-07-04 15:41:40 +02:00
parent 0afa74b446
commit 236227f2fb
2 changed files with 6 additions and 4 deletions

View file

@ -222,7 +222,7 @@ function SessionItem(props: RouteComponentProps & Props) {
</div>
<div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
<div style={{ height: '21px' }}>
<CountryFlag userCity={userCity} userState={userState} country={userCountry} label />
<CountryFlag userCity={userCity} userState={userState} country={userCountry} showLabel={true} />
</div>
<div className="color-gray-medium flex items-center py-1">
<span className="capitalize" style={{ maxWidth: '70px' }}>

View file

@ -12,6 +12,7 @@ interface CountryFlagProps {
style?: CSSProperties;
width?: number;
height?: number;
showLabel?: boolean;
}
@ -22,7 +23,8 @@ const CountryFlag: FC<CountryFlagProps> = ({
className = '',
style = {},
width = 22,
height = 15
height = 15,
showLabel = false,
}) => {
const knownCountry = !!country && country !== 'UN';
const countryFlag = knownCountry ? country.toLowerCase() : '';
@ -54,14 +56,14 @@ const CountryFlag: FC<CountryFlagProps> = ({
{knownCountry ? (
<Tooltip title={fullGeoInfo} mouseEnterDelay={0.5}>
<div
className={cn(`flag flag-${countryFlag}`, className)}
className={cn(`flag flag-${countryFlag} flex-shrink-0`, className)}
style={{ width: `${width}px`, height: `${height}px` }}
/>
</Tooltip>
) : (
renderUnknownCountry
)}
{renderGeoInfo}
{showLabel && renderGeoInfo}
</div>
);
};