إنشاء محول عملات باستخدام React

import { NextRequest, NextResponse } from "next/server";export async function GET(request: NextRequest) {  const { searchParams } = request.nextUrl;  const from = searchParams.get("from")?.toUpperCase();  const to = searchParams.get("to")?.toUpperCase();  const amount = Number(searchParams.get("amount"));  if (!from || !to || !Number.isFinite(amount) || amount < 0) {    return NextResponse.json({ error: "invalid_input" }, { status: 400 });  }  const response = await fetch(    `https://api.exchangerate.dev/v1/convert/${from}/${to}/${amount}`,    {      headers: { Authorization: `Bearer ${process.env.EXCHANGERATE_API_KEY}` },      signal: AbortSignal.timeout(5000),      next: { revalidate: 60 },    },  );  return NextResponse.json(await response.json(), { status: response.status });}

"use client";import { FormEvent, useState } from "react";type ConversionResult = {  converted: string;  source: string;  data_updated_at: string;};export function CurrencyConverter() {  const [amount, setAmount] = useState("100");  const [result, setResult] = useState<ConversionResult | null>(null);  const [error, setError] = useState("");  const [loading, setLoading] = useState(false);  async function submit(event: FormEvent) {    event.preventDefault();    setLoading(true); setError("");    try {      const params = new URLSearchParams({ from: "USD", to: "EUR", amount });      const response = await fetch(`/api/convert?${params}`);      const body = await response.json();      if (!response.ok) throw new Error(body.error ?? "conversion_failed");      setResult(body);    } catch (caught) {      setError(caught instanceof Error ? caught.message : "conversion_failed");    } finally { setLoading(false); }  }  return <form onSubmit={submit}>    <input value={amount} onChange={(event) => setAmount(event.target.value)} inputMode="decimal" />    <button disabled={loading}>{loading ? "Converting…" : "Convert"}</button>    {error && <p role="alert">{error}</p>}    {result && <output>{result.converted} EUR · {result.source} · {result.data_updated_at}</output>}  </form>;}