[V0_FILE]typescriptreact:file="global.css" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .perspective-1000 { perspective: 1000px; } .transform-style-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } .drop-shadow-glow { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); } .glow { box-shadow: 0 0 15px theme("colors.blue.500"), 0 0 30px theme("colors.teal.500"); } } @layer base { :root { --background: 222 47% 11%; --foreground: 214 32% 91%; --primary: 217 91% 60%; --primary-foreground: 210 40% 98%; --accent: 215 25% 27%; --accent-foreground: 210 40% 98%; --border: 215 25% 27%; --ring: 215 25% 27%; --radius: 0.5rem; } html, body { height: 100%; overflow-x: hidden; font-family: "Inter", sans-serif; } #__next { height: 100%; } } /* Add custom font (optional, but enhances the modern look) */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); @keyframes neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 0.99; text-shadow: 0 0 5px rgba(0, 255, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5); } 20%, 24%, 55% { opacity: 0.8; text-shadow: none; } } .neon-flicker { animation: neon-flicker 5s infinite alternate; } [V0_FILE]typescriptreact:file="ticker-display.tsx" isFixed="true" isQuickEdit="true" "use client" import React, { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Card } from "@/components/ui/card" import { ArrowUpRight, ArrowDownRight, Trash2, Plus } from "lucide-react" import { LineChart, Line, ResponsiveContainer, Tooltip, YAxis } from "recharts" interface Asset { id: string symbol: string name: string price: number change24h: number marketCap: number volume24h: number volumeChange24h: number priceHistory: { price: number; time: string }[] high24h: number low24h: number totalSupply: number type: "stock" | "etf" | "crypto" } const generateRealisticMockData = (basePrice: number, volatility = 0.05, trend = 0.01) => { let currentPrice = basePrice const now = Date.now() return Array.from({ length: 30 }, (_, i) => { const randomFactor = Math.random() * 2 - 1 // Range from -1 to 1 const trendFactor = Math.random() * 0.5 + 0.75 // 0.75 to 1.25, slightly biased towards positive const randomChange = (randomFactor * volatility + trend * trendFactor) * currentPrice currentPrice += randomChange currentPrice = Math.max(currentPrice, basePrice * 0.9) // Prevent price from going too low currentPrice = Math.min(currentPrice, basePrice * 1.1) // Prevent price from going too high const time = new Date(now - (29 - i) * 5 * 60 * 1000) // 5-minute intervals return { price: currentPrice, time: time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } }) } const initialAssets: Asset[] = [ { id: "bitcoin", symbol: "BTC", name: "Bitcoin", price: 97845.0, change24h: 3.5, marketCap: 1920000000000, volume24h: 40000000000, volumeChange24h: 4.2, priceHistory: generateRealisticMockData(97845.0, 0.1, 0.03), high24h: 99000.0, low24h: 96000.0, totalSupply: 21000000, type: "crypto", }, { id: "ethereum", symbol: "ETH", name: "Ethereum", price: 5230.0, change24h: 2.8, marketCap: 630000000000, volume24h: 20000000000, volumeChange24h: 3.1, priceHistory: generateRealisticMockData(5230.0, 0.09, 0.025), high24h: 5350.0, low24h: 5150.0, totalSupply: 120000000, type: "crypto", }, { id: "solana", symbol: "SOL", name: "Solana", price: 185.5, change24h: 4.2, marketCap: 80000000000, volume24h: 5000000000, volumeChange24h: 5.5, priceHistory: generateRealisticMockData(185.5, 0.12, 0.035), high24h: 190.0, low24h: 180.0, totalSupply: 549846983, type: "crypto", }, { id: "aapl", symbol: "AAPL", name: "Apple Inc.", price: 175.2, change24h: 1.5, marketCap: 2750000000000, volume24h: 55000000, volumeChange24h: 2.2, priceHistory: generateRealisticMockData(175.2, 0.04, 0.015), high24h: 177.5, low24h: 174.0, totalSupply: 16000000000, type: "stock", }, { id: "googl", symbol: "GOOGL", name: "Alphabet Inc.", price: 152.5, change24h: 1.8, marketCap: 1920000000000, volume24h: 35000000, volumeChange24h: 2.5, priceHistory: generateRealisticMockData(152.5, 0.05, 0.02), high24h: 154.0, low24h: 151.0, totalSupply: 6600000000, type: "stock", }, { id: "qqq", symbol: "QQQ", name: "Invesco QQQ Trust", price: 430.5, change24h: 1.6, marketCap: 230000000000, volume24h: 88000000, volumeChange24h: 2.3, priceHistory: generateRealisticMockData(430.5, 0.03, 0.01), high24h: 433.0, low24h: 428.0, totalSupply: 530000000, type: "etf", }, { id: "spy", symbol: "SPY", name: "SPDR S&P 500 ETF", price: 505.2, change24h: 1.2, marketCap: 455000000000, volume24h: 110000000, volumeChange24h: 1.8, priceHistory: generateRealisticMockData(505.2, 0.02, 0.008), high24h: 508.8, low24h: 503.5, totalSupply: 950000000, type: "etf", }, ] const getBorderColor = (change: number) => { const absChange = Math.abs(change) if (change >= 0) { if (absChange >= 5) return "border-green-500" if (absChange >= 2) return "border-green-400" return "border-green-300" } else { if (absChange >= 5) return "border-red-500" if (absChange >= 2) return "border-red-400" return "border-red-300" } } const getGlowColor = (change: number) => { if (change >= 0) { return "shadow-[0_0_15px_rgba(34,197,94,0.5)]" // green glow } else { return "shadow-[0_0_15px_rgba(239,68,68,0.5)]" // red glow } } const getBorderWidth = (change: number) => { const absChange = Math.abs(change) if (absChange >= 5) return "border-4 hover:border-[6px]" if (absChange >= 2) return "border-2 hover:border-[4px]" return "border hover:border-2" } const simulatePriceChange = (asset: Asset): Asset => { const volatility = 0.003 // 0.3% volatility const trend = 0.0005 // 0.05% trend const randomFactor = Math.random() * 2 - 1 // Range from -1 to 1 const trendFactor = Math.random() * 0.5 + 0.75 // 0.75 to 1.25, slightly biased towards positive const randomChange = (randomFactor * volatility + trend * trendFactor) * asset.price const newPrice = asset.price + randomChange const newChange24h = (newPrice / asset.priceHistory[0].price - 1) * 100 const now = new Date() const newPricePoint = { price: newPrice, time: now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), } return { ...asset, price: newPrice, change24h: newChange24h, priceHistory: [...asset.priceHistory.slice(1), newPricePoint], high24h: Math.max(asset.high24h, newPrice), low24h: Math.min(asset.low24h, newPrice), } } const CardFront = React.memo(({ asset, displayPrice }: { asset: Asset; displayPrice: number }) => (

{asset.symbol}

{asset.name}

= 0 ? "text-green-400" : "text-red-400"} font-semibold`}> {asset.change24h >= 0 ? : } {asset.change24h.toFixed(2)}%

= 0 ? "#4ade80" : "#f87171"} strokeWidth={2} dot={false} isAnimationActive={false} /> { if (active && payload && payload.length) { return (

${payload[0].value.toFixed(2)}

{payload[0].payload.time}

) } return null }} />

${displayPrice.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

)) const CardBack = React.memo(({ asset, onDelete }: { asset: Asset; onDelete: () => void }) => (

{asset.name}

({asset.symbol})

Market Cap: ${(asset.marketCap / 1e9).toFixed(2)}B

24h Volume: ${(asset.volume24h / 1e9).toFixed(2)}B

24h High:{" "} ${asset.high24h.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

24h Low:{" "} ${asset.low24h.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Total Supply: {asset.totalSupply.toLocaleString()}

Volume Change (24h):{" "} = 0 ? "text-green-400" : "text-red-400"}`}> {asset.volumeChange24h.toFixed(2)}%

${asset.price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

)) const AssetCard = React.memo( ({ asset, isFlipped, onFlip, onDelete, }: { asset: Asset isFlipped: boolean onFlip: () => void onDelete: () => void }) => { const [displayPrice, setDisplayPrice] = useState(asset.price) useEffect(() => { const timer = setTimeout(() => { setDisplayPrice(asset.price) }, 300) // Slight delay for smooth transition return () => clearTimeout(timer) }, [asset.price]) return ( = 0 ? "bg-green-500/10" : "bg-red-500/10" } ${getBorderColor(asset.change24h)} ${getBorderWidth(asset.change24h)} ${getGlowColor(asset.change24h)} neon-flicker hover:border-black`} onClick={onFlip} >

{!isFlipped ? ( ) : ( )} ) }, ) export default function TickerDisplay() { const [assets, setAssets] = useState(initialAssets) const [flippedCards, setFlippedCards] = useState>(new Set()) const [isAddingTicker, setIsAddingTicker] = useState(false) const [newTickerSymbol, setNewTickerSymbol] = useState("") const handleCardClick = (id: string) => { setFlippedCards((prevFlipped) => { const newFlipped = new Set(prevFlipped) if (newFlipped.has(id)) { newFlipped.delete(id) } else { newFlipped.add(id) } return newFlipped }) } const handleAddTicker = () => { if (newTickerSymbol.trim() === "") return const type: "stock" | "etf" | "crypto" = Math.random() > 0.7 ? "crypto" : Math.random() > 0.5 ? "stock" : "etf" const basePrice = 100 + Math.random() * 900 const volatility = type === "crypto" ? 0.08 : type === "stock" ? 0.04 : 0.02 const trend = type === "crypto" ? 0.02 : type === "stock" ? 0.01 : 0.005 const newAsset: Asset = { id: newTickerSymbol.toLowerCase(), symbol: newTickerSymbol.toUpperCase(), name: `${newTickerSymbol.toUpperCase()} ${type.charAt(0).toUpperCase() + type.slice(1)}`, price: basePrice, change24h: Math.random() * 10 - 5, // Range from -5% to 5% marketCap: 1000000000 + Math.random() * 9000000000, volume24h: 10000000 + Math.random() * 90000000, volumeChange24h: Math.random() * 20 - 10, // Range from -10% to 10% priceHistory: generateRealisticMockData(basePrice, volatility, trend), high24h: basePrice * (1 + Math.random() * 0.05), low24h: basePrice * (1 - Math.random() * 0.05), totalSupply: 1000000 + Math.random() * 9000000, type: type, } setAssets((prevAssets) => [...prevAssets, newAsset]) setIsAddingTicker(false) setNewTickerSymbol("") } const handleDeleteAsset = (id: string) => { setAssets((prevAssets) => prevAssets.filter((asset) => asset.id !== id)) setFlippedCards((prevFlipped) => { const newFlipped = new Set(prevFlipped) newFlipped.delete(id) return newFlipped }) } useEffect(() => { const interval = setInterval(() => { setAssets((prevAssets) => prevAssets.map((asset) => simulatePriceChange(asset))) }, 5000) // Update every 5 seconds return () => clearInterval(interval) }, []) return (

TKR Pro: Real-Time Market Tracker

{assets.map((asset) => ( handleCardClick(asset.id)} onDelete={() => handleDeleteAsset(asset.id)} /> ))} {isAddingTicker ? ( setNewTickerSymbol(e.target.value)} placeholder="Enter ticker symbol" className="w-full p-2 mb-4 bg-gray-700 text-white border border-gray-600 rounded" autoFocus />

) : ( setIsAddingTicker(true)} >

Add New Ticker

)}

) }

About

Tags

Share

More from james-9405

More Templates Like This

About

Tags

Share

About

Tags

Share

More from james-9405

More Templates Like This