hpos-web/src/components/Locations.js

import React, { useState } from 'react';
import { FaInfoCircle } from "react-icons/fa";

import WorldMap from './WorldMap';
import './Locations.css';

function Locations({ show }) {
    const [showCardInfo, setShowCardInfo] = useState(false);

    return (
        <div className='locations-card'>
            <div className='locations-card-title'>Locations<span className='locations-info-icon' onClick={() => { setShowCardInfo(!showCardInfo) }}><FaInfoCircle /></span>
                {showCardInfo && <div className='locations-info-card'>Test locations are shown in map. For example, Nagpur has conducted tests</div>}
            </div>
            <WorldMap show={show} />
        </div>
    );
}
export default Locations;