v0 + brapi

Adicione uma tela de dados do mercado financeiro brasileiro a esta aplicação Next.js usando a brapi.

Fontes oficiais:
- REST: https://brapi.dev/api/v2
- OpenAPI: https://brapi.dev/openapi.json
- Dicionário: https://brapi.dev/api/v2/dictionary

Requisitos:
- Crie app/api/brapi/quote/route.ts.
- Aceite symbols como uma lista de tickers separada por vírgulas.
- Faça GET para https://brapi.dev/api/v2/stocks/quote?symbols=...
- Leia BRAPI_TOKEN somente em process.env no servidor.
- Envie Authorization: Bearer ${BRAPI_TOKEN} quando houver token.
- Use PETR4 como primeiro teste sem token.
- Aceite também VALE3, MGLU3 e ITUB4 no sandbox sem token.
- Crie um formulário com symbols, estado de carregamento e mensagem de erro.
- Mostre o endpoint e os timestamps que vierem na resposta.
- Preserve campos null. Não invente campos de resposta.
- Não coloque BRAPI_TOKEN em código client-side.
- Não ofereça recomendação de investimento.

Leia o OpenAPI antes de gerar os tipos e valide a rota com PETR4.

BRAPI_TOKEN=seu-token

export async function GET(request: Request) {
  const requestUrl = new URL(request.url);
  const symbols = requestUrl.searchParams.get("symbols") ?? "PETR4";
  const url = new URL("https://brapi.dev/api/v2/stocks/quote");
  url.searchParams.set("symbols", symbols);

  const response = await fetch(url, {
    headers: process.env.BRAPI_TOKEN
      ? { Authorization: `Bearer ${process.env.BRAPI_TOKEN}` }
      : undefined,
  });

  return Response.json(await response.json(), { status: response.status });
}