Default Component - Copy this React, Tailwind Component to your project

como deve ser o dashiboard:import React, { useState } from 'react'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { TrendingUp, TrendingDown, RefreshCcw } from 'lucide-react'; const ArbitrageOpportunity = ({ data }) => { const profitColor = data.profitPercentage >= 0 ? 'text-green-500' : 'text-red-500'; return ( <Card className="mb-4"> <CardHeader className="flex flex-row items-center justify-between pb-2"> <CardTitle className="text-lg font-medium"> {data.pair1} → {data.pair2} → {data.pair3} </CardTitle> <div className={`flex items-center ${profitColor} font-bold`}> {data.profitPercentage >= 0 ? <TrendingUp className="mr-1" /> : <TrendingDown className="mr-1" />} {data.profitPercentage.toFixed(2)}% </div> </CardHeader> <CardContent> <Table> <TableHeader> <TableRow> <TableHead>Par</TableHead> <TableHead>Preço</TableHead> <TableHead>Volume 24h</TableHead> <TableHead>Liquidez</TableHead> </TableRow> </TableHeader> <TableBody> {[ { pair: data.pair1, price: data.price1, volume: data.volume1, liquidity: data.liquidity1 }, { pair: data.pair2, price: data.price2, volume: data.volume2, liquidity: data.liquidity2 }, { pair: data.pair3, price: data.price3, volume: data.volume3, liquidity: data.liquidity3 }, ].map((row, index) => ( <TableRow key={index}> <TableCell className="font-medium">{row.pair}</TableCell> <TableCell>${row.price.toFixed(4)}</TableCell> <TableCell>${row.volume.toLocaleString()}</TableCell> <TableCell>${row.liquidity.toLocaleString()}</TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> ); }; const ArbitrageDashboard = () => { // Simulated data - replace with real Binance API data const [opportunities] = useState([ { pair1: 'BTC/USDT', pair2: 'ETH/BTC', pair3: 'ETH/USDT', price1: 45000.50, price2: 0.067, price3: 3015.25, volume1: 1250000, volume2: 450000, volume3: 890000, liquidity1: 5000000, liquidity2: 2000000, liquidity3: 3000000, profitPercentage: 0.45 }, // Adicione mais oportunidades aqui ]); return ( <div className="p-6 max-w-6xl mx-auto"> <div className="flex justify-between items-center mb-6"> <h1 className="text-2xl font-bold">Arbitragem Triangular</h1> <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"> <RefreshCcw className="w-4 h-4" /> Atualizar Dados </button> </div> <div className="grid gap-6"> {opportunities.map((opportunity, index) => ( <ArbitrageOpportunity key={index} data={opportunity} /> ))} </div> </div> ); }; export default ArbitrageDashboard;