[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { TrendingUp, BarChart3, Wallet, Bell, Search, Home, Activity, PieChart, User, ArrowUpRight, ArrowDownRight, } from "lucide-react" import { LineChart, Line, XAxis, YAxis, ResponsiveContainer } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const cryptoData = [ { symbol: "BTC", name: "Bitcoin", price: 43250.5, change: 2.45, changePercent: 5.67, volume: "28.5B", marketCap: "847.2B", }, { symbol: "ETH", name: "Ethereum", price: 2580.75, change: -45.2, changePercent: -1.72, volume: "15.2B", marketCap: "310.4B", }, { symbol: "BNB", name: "BNB", price: 315.4, change: 8.9, changePercent: 2.9, volume: "1.8B", marketCap: "47.1B", }, { symbol: "SOL", name: "Solana", price: 98.25, change: 12.35, changePercent: 14.38, volume: "2.1B", marketCap: "43.8B", }, ] const chartData = [ { time: "00:00", price: 43000 }, { time: "04:00", price: 43150 }, { time: "08:00", price: 42900 }, { time: "12:00", price: 43200 }, { time: "16:00", price: 43100 }, { time: "20:00", price: 43250 }, ] const tradingSignals = [ { symbol: "BTC/USDT", signal: "BUY", strength: "Strong", price: 43250, target: 45000, stopLoss: 42000, time: "2 min ago", }, { symbol: "ETH/USDT", signal: "SELL", strength: "Moderate", price: 2580, target: 2400, stopLoss: 2650, time: "5 min ago", }, { symbol: "SOL/USDT", signal: "BUY", strength: "Strong", price: 98.25, target: 105, stopLoss: 95, time: "8 min ago", }, ] export default function LeochartApp() { const [selectedCrypto, setSelectedCrypto] = useState(cryptoData[0]) const [activeTab, setActiveTab] = useState("home") const renderHomeContent = () => (

{/* Market Overview */}

{cryptoData.map((crypto) => ( setSelectedCrypto(crypto)} >

{crypto.symbol} {crypto.symbol}

{crypto.changePercent > 0 ? ( ) : ( )}

${crypto.price.toLocaleString()}

0 ? "text-green-500" : "text-red-500"}`}> {crypto.changePercent > 0 ? "+" : ""} {crypto.changePercent.toFixed(2)}%

))}

{/* Selected Crypto Chart */}

{selectedCrypto.name} ({selectedCrypto.symbol}) 0 ? "default" : "destructive"}> {selectedCrypto.changePercent > 0 ? "+" : ""} {selectedCrypto.changePercent.toFixed(2)}%

${selectedCrypto.price.toLocaleString()}

} /> {/* Quick Stats */}

24h Volume

{selectedCrypto.volume}

Market Cap

{selectedCrypto.marketCap}

) const renderAnalysisContent = () => (

{/* Technical Indicators */} Technical Indicators

RSI (14) 65.4 - Neutral

MACD Bullish

Moving Average (50) Above

Bollinger Bands Middle Band

{/* Trading Signals */} Trading Signals

{tradingSignals.map((signal, index) => (

{signal.symbol}

{signal.time}

{signal.signal}

Entry

${signal.price}

Target

${signal.target}

Stop Loss

${signal.stopLoss}

{signal.strength} Signal

))}

) const renderPortfolioContent = () => (

{/* Portfolio Summary */} Portfolio Value

$12,450.75

+$1,245.50 (11.2%)

{/* Holdings */} Holdings

{cryptoData.slice(0, 3).map((crypto, index) => (

{crypto.symbol}

{crypto.name}

${(crypto.price * (index + 1) * 0.1).toFixed(2)}

0 ? "text-green-500" : "text-red-500"}`}> {crypto.changePercent > 0 ? "+" : ""} {crypto.changePercent.toFixed(2)}%

))}

) const renderProfileContent = () => (

Profile

John Doe

Premium Trader

) return (

{/* Header */}

Leochart

{/* Main Content */}

{activeTab === "home" && renderHomeContent()} {activeTab === "analysis" && renderAnalysisContent()} {activeTab === "portfolio" && renderPortfolioContent()} {activeTab === "profile" && renderProfileContent()}

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null }