import Head from "next/head"; import { useEffect, useState } from "react"; import { fetchData } from "../utils/api"; export default function Rates() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchDataFromApi = async () => { try { const apiData = await fetchData(); setData(apiData); setError(null); } catch (error) { console.error("Error fetching data:", error); setError("Failed to load exchange rates. Please try again later."); } finally { setLoading(false); } }; fetchDataFromApi(); }, []); const formatCurrency = (value) => { return new Intl.NumberFormat("en-NG", { style: "currency", currency: "NGN", }).format(value); }; const getBestRate = () => { if (!data || data.length === 0) return null; return Math.max(...data.map(item => item.rate)); }; const bestRate = getBestRate(); const sortedData = data ? [...data].sort((a, b) => { const aIsBest = a.bestRate || a.rate === bestRate; const bIsBest = b.bestRate || b.rate === bestRate; if (aIsBest && !bIsBest) return -1; if (!aIsBest && bIsBest) return 1; return b.rate - a.rate; }) : null; return (
EUR to NGN Exchange Rates - Jesse Egbosionu

Exchange Rates

Compare live EUR to NGN rates across providers

€1 EUR → NGN
{loading && (
{[...Array(6)].map((_, index) => (
))}
)} {error && (
⚠️

Unable to load rates

{error}

)} {!loading && !error && sortedData && sortedData.length > 0 && ( <>
{sortedData.map((item, index) => (

{item.provider}

{(item.bestRate || item.rate === bestRate) && ( Best Rate )}
{formatCurrency(item.rate)}
Visit provider →
))}

Rates are updated regularly. Click on a provider to visit their website.

Last updated: {new Date().toLocaleString('en-GB', { dateStyle: 'medium', timeStyle: 'short' })}

)} {!loading && !error && (!data || data.length === 0) && (
📊

No rates available

We couldn't find any exchange rates at the moment.

)}
); }