"use client" import type React from "react" import { useState, useEffect, useCallback, useMemo, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { BackgroundPlus } from "../../demos/background-plus" const formatPrice = (price: number): string => { if (price < 0.01) return `$${price.toFixed(6)}` if (price < 1) return `$${price.toFixed(4)}` if (price < 100) return `$${price.toFixed(2)}` return `$${price.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` } const formatMarketCap = (marketCap: number): string => { if (marketCap >= 1e12) return `$${(marketCap / 1e12).toFixed(2)}T` if (marketCap >= 1e9) return `$${(marketCap / 1e9).toFixed(2)}B` if (marketCap >= 1e6) return `$${(marketCap / 1e6).toFixed(2)}M` return `$${marketCap.toLocaleString()}` } const formatPercentage = (percentage: number): string => { const sign = percentage >= 0 ? "+" : "" return `${sign}${percentage.toFixed(2)}%` } const mockCryptoData = [ { id: "bitcoin", symbol: "btc", name: "Bitcoin", image: "https://assets.coingecko.com/coins/images/1/large/bitcoin.png", current_price: 43250.5, market_cap: 847500000000, market_cap_rank: 1, price_change_percentage_24h: 2.45, total_volume: 18500000000, high_24h: 44100.25, low_24h: 42800.75, sparkline_in_7d: { price: [42000, 42500, 43000, 42800, 43200, 43500, 43250] }, }, { id: "ethereum", symbol: "eth", name: "Ethereum", image: "https://assets.coingecko.com/coins/images/279/large/ethereum.png", current_price: 2650.75, market_cap: 318500000000, market_cap_rank: 2, price_change_percentage_24h: -1.25, total_volume: 12500000000, high_24h: 2720.5, low_24h: 2620.25, sparkline_in_7d: { price: [2700, 2680, 2650, 2670, 2640, 2660, 2650] }, }, { id: "binancecoin", symbol: "bnb", name: "BNB", image: "https://assets.coingecko.com/coins/images/825/large/bnb-icon2_2x.png", current_price: 315.25, market_cap: 47200000000, market_cap_rank: 4, price_change_percentage_24h: 0.85, total_volume: 1250000000, high_24h: 320.5, low_24h: 312.75, sparkline_in_7d: { price: [310, 312, 315, 318, 314, 316, 315] }, }, { id: "solana", symbol: "sol", name: "Solana", image: "https://assets.coingecko.com/coins/images/4128/large/solana.png", current_price: 98.45, market_cap: 43500000000, market_cap_rank: 5, price_change_percentage_24h: 3.75, total_volume: 2100000000, high_24h: 102.25, low_24h: 95.5, sparkline_in_7d: { price: [95, 97, 99, 96, 98, 100, 98] }, }, ] interface CryptoData { id: string symbol: string name: string image: string current_price: number market_cap: number market_cap_rank: number price_change_percentage_24h: number total_volume: number high_24h: number low_24h: number sparkline_in_7d: { price: number[] } } const useElementSize = (): [React.RefObject, { width: number; height: number }] => { const ref = useRef(null) const [size, setSize] = useState({ width: 0, height: 0 }) useEffect(() => { const node = ref.current if (!node) return const update = () => { setSize({ width: node.clientWidth, height: node.clientHeight }) } update() let ro: ResizeObserver | null = null if (typeof ResizeObserver !== "undefined") { ro = new ResizeObserver(update) ro.observe(node) } else { window.addEventListener("resize", update) } return () => { if (ro) ro.disconnect() else window.removeEventListener("resize", update) } }, []) return [ref, size] } const ProfessionalCard: React.FC<{ isActive?: boolean children: React.ReactNode className?: string }> = ({ isActive, children, className }) => { return (

{ children } < /div> < /div> < /div> ) } const InteractiveChart: React.FC<{ data: number[] positive: boolean className?: string }> = ({ data, positive, className }) => { const [containerRef, { width, height }] = useElementSize() const [hoverIdx, setHoverIdx] = useState(null) const [isPointer, setIsPointer] = useState(false) const desiredHeight = 180 const padding = { top: 20, right: 20, bottom: 30, left: 50 } const innerW = Math.max(0, width - padding.left - padding.right) const innerH = Math.max(0, desiredHeight - padding.top - padding.bottom) const minV = Math.min(...data) const maxV = Math.max(...data) const range = maxV - minV || 1 const xFor = (i: number) => (data.length <= 1 ? 0 : (i / (data.length - 1)) * innerW) const yFor = (v: number) => innerH - ((v - minV) / range) * innerH const points = data.map((v, i) => [xFor(i), yFor(v)] as const) const dPath = useMemo(() => { if (!points.length) return "" return points.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(" ") }, [innerW, innerH, data]) const gridLines = 3 const gridYVals = Array.from({ length: gridLines + 1 }, (_, i) => minV + (i * range) / gridLines) const handlePointer = (clientX: number) => { const rect = containerRef.current?.getBoundingClientRect() if (!rect) return const x = clientX - rect.left - padding.left if (x < 0 || x > innerW) { setHoverIdx(null) return } const ratio = x / innerW const idx = Math.max(0, Math.min(data.length - 1, Math.round(ratio * (data.length - 1)))) setHoverIdx(idx) } return (

{ setIsPointer(true) handlePointer(e.clientX) }} onMouseLeave = {() => { setIsPointer(false) setHoverIdx(null) }} onTouchStart = {(e) => { setIsPointer(true) if (e.touches[0]) handlePointer(e.touches[0].clientX) }} onTouchMove = {(e) => { if (e.touches[0]) handlePointer(e.touches[0].clientX) }} onTouchEnd = {() => { setIsPointer(false) setHoverIdx(null) }} >

Price < /span> < span className = "font-bold text-zinc-900 dark:text-zinc-100" > { formatPrice(data[hoverIdx]) } < /span> < /div> < div className = "flex items-center justify-between mt-1" > Point < /span> < span className = "text-zinc-700 dark:text-zinc-300" > { hoverIdx + 1}/{data.length} < /span> < /div> < /motion.div> )}

) } const SearchModal: React.FC<{ isOpen: boolean onClose: () => void onAddCoin: (coin: CryptoData) => void }> = ({ isOpen, onClose, onAddCoin }) => { const [searchQuery, setSearchQuery] = useState("") const [searchResults, setSearchResults] = useState([]) const [isLoading, setIsLoading] = useState(false) const searchCoins = useCallback(async (query: string) => { if (!query.trim()) { setSearchResults([]) return } setIsLoading(true) try { const response = await fetch(`https://api.coingecko.com/api/v3/search?query=${encodeURIComponent(query)}`) if (response.ok) { const data = await response.json() const coinIds = data.coins .slice(0, 5) .map((coin: any) => coin.id) .join(",") const detailsResponse = await fetch( `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${coinIds}&order=market_cap_desc&per_page=5&page=1&sparkline=true&price_change_percentage=24h`, ) if (detailsResponse.ok) { const detailsData = await detailsResponse.json() setSearchResults(detailsData) } } } catch (error) { const filtered = mockCryptoData.filter( (coin) => coin.name.toLowerCase().includes(query.toLowerCase()) || coin.symbol.toLowerCase().includes(query.toLowerCase()), ) setSearchResults(filtered) } finally { setIsLoading(false) } }, []) useEffect(() => { const timeoutId = setTimeout(() => { searchCoins(searchQuery) }, 300) return () => clearTimeout(timeoutId) }, [searchQuery, searchCoins]) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault() } if (e.key === "Escape" && isOpen) onClose() } document.addEventListener("keydown", handleKeyDown) return () => document.removeEventListener("keydown", handleKeyDown) }, [isOpen, onClose]) if (!isOpen) return null return ( e.stopPropagation()} >

setSearchQuery(e.target.value)} className = "w-full px-3 py-2 rounded-md bg-white border border-zinc-300 text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-100" autoFocus />

< div className = "max-h-72 overflow-y-auto" > { isLoading?(

Searching... ) : searchResults.length > 0 ? ( searchResults.map((coin) => (

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

Crypto Dashboard

Created by

Installation

How to use

Dependencies

Crypto Dashboard

Created by

Installation

How to use

Dependencies