import { FaLocationArrow } from 'react-icons/fa'; import { Button, Tag, NotSupported } from 'components'; import run, { hasSupport } from '../../apis/geolocation'; function Geolocation() { if (!hasSupport()) { return <NotSupported />; } return ( <div className=" tw-flex tw-flex-col tw-items-start " > <Button leftIcon={<FaLocationArrow />} onClick={run}> Get my location </Button> <div className=" tw-shadow tw-overflow-hidden tw-border-b tw-border-gray-200 sm:tw-rounded-lg tw-mt-4 " > <table className=" tw-w-full tw-min-w-full tw-divide-y tw-divide-gray-200 " > <thead className="tw-bg-gray-100"> <tr> <th scope="col" className=" tw-px-6 tw-py-3 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider " > Property </th> <th scope="col" className=" tw-px-6 tw-py-3 tw-text-left tw-text-xs tw-font-medium tw-text-gray-500 tw-uppercase tw-tracking-wider " > Value </th> </tr> </thead> <tbody className=" tw-bg-white tw-divide-y tw-divide-gray-200 " > <tr> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <div className=" tw-text-sm tw-text-gray-900 " > Latitude </div> </td> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <span id="js-geolocation--latitude" className=" tw-text-sm tw-text-gray-900 " > Unknow </span> </td> </tr> <tr className="tw-bg-gray-50"> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <div className=" tw-text-sm tw-text-gray-900 " > Logintude </div> </td> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <span id="js-geolocation--longitude" className=" tw-text-sm tw-text-gray-900 " > Unknow </span> </td> </tr> <tr> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <div className=" tw-text-sm tw-text-gray-900 " > Accurate </div> </td> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <span id="js-geolocation--accuracy" className=" tw-text-sm tw-text-gray-900 " > Unknow </span> </td> </tr> <tr className="tw-bg-gray-50"> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <div className=" tw-text-sm tw-text-gray-900 " > Opengraph </div> </td> <td className=" tw-px-6 tw-py-4 tw-whitespace-nowrap " > <span id="js-geolocation--longitude" className=" tw-text-sm tw-text-gray-900 " > <Tag id="js-geolocation--opengraph" as="a" href="" rel="noopener noreferrer" target="_blank" > open in new tab </Tag> </span> </td> </tr> </tbody> </table> </div> </div> ); } export default Geolocation;