تشخیص فیلترشکن در ری اکت ! ( گرفتن لوکیشن، IP، کشور و سایر اطلاعات کاربر )

				
					import React from 'react';
import { useVPNDetector } from 'react-vpn-detector';

const App = () => {
  const { isUsingVPN, data, error } = useVPNDetector({
    apiUrl: 'https://api.ipgeolocation.io/ipgeo?apiKey=YOUR_API_KEY', // you can get it free from https://ipgeolocation.io/
  });

  if (error) {
    return (
      <div className='flex justify-center items-center h-screen bg-red-50'>
        <div className='p-4 bg-white shadow-md rounded-lg'>
          <h1 className='text-xl font-semibold text-red-500'>Error</h1>
          <p className='text-gray-700 mt-2'>{error}</p>
        </div>
      </div>
    );
  }

  return (
    <div className='min-h-screen bg-gray-50 flex flex-col items-center py-10'>
      <div className='bg-white shadow-lg rounded-lg p-8 max-w-4xl w-full'>
        <h1 className='text-2xl font-bold mb-6 text-gray-800'>VPN Detection</h1>
        <div
          className={`p-4 rounded-lg ${
            isUsingVPN
              ? 'bg-red-100 text-red-800'
              : 'bg-green-100 text-green-800'
          }`}
        >
          <p className='font-semibold'>
            VPN Status: {isUsingVPN ? 'VPN Detected' : 'No VPN detected'}
          </p>
        </div>
        {data && (
          <div className='mt-6 space-y-6'>
            <div className='flex items-center space-x-4'>
              <img
                src={data.country_flag}
                alt={`Flag of ${data.country_name}`}
                className='w-12 h-12 rounded-lg'
              />
              <div>
                <h2 className='text-lg font-bold text-gray-800'>
                  {data.country_name}
                </h2>
                <p className='text-gray-600'>{data.country_name_official}</p>
                <p className='text-gray-600'>
                  {data.city}, {data.state_prov}, {data.country_capital}
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;