mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
9f1122cf9b
- Fix gray/zinc alias confusion (gray→neutral, zinc→zen) - Consolidate duplicate gray color definition - Add finance components to ui/ directory - Clean up documentation structure - Remove test artifacts and backup files The color aliases were incorrectly mapped: Before: gray→zen, zinc→neutral (wrong) After: gray→neutral, zinc→zen (correct) This ensures Hanzo's branded 'zen' color properly maps to zinc while gray correctly references the standard neutral palette. Verified: - Production build: 544 pages ✓ - All tests passing: 219/219 ✓ - Visual verification: /colors page working ✓ - Code review: Approved ✓ Ready for deployment to ui.hanzo.ai
116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { memo, useEffect, useRef } from "react"
|
|
|
|
function MarketOverview() {
|
|
const container = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!container.current) return
|
|
|
|
// Check if widget is already initialized using data attribute
|
|
if (container.current.dataset.initialized === "true") {
|
|
return // Widget already initialized, skip
|
|
}
|
|
|
|
// Mark as initialized before adding script
|
|
container.current.dataset.initialized = "true"
|
|
|
|
const script = document.createElement("script")
|
|
script.src =
|
|
"https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js"
|
|
script.type = "text/javascript"
|
|
script.async = true
|
|
script.innerHTML = JSON.stringify({
|
|
colorTheme: "dark",
|
|
dateRange: "12M",
|
|
locale: "en",
|
|
largeChartUrl: "",
|
|
isTransparent: false,
|
|
showFloatingTooltip: false,
|
|
plotLineColorGrowing: "rgba(41, 98, 255, 1)",
|
|
plotLineColorFalling: "rgba(41, 98, 255, 1)",
|
|
gridLineColor: "rgba(240, 243, 250, 0)",
|
|
scaleFontColor: "#DBDBDB",
|
|
belowLineFillColorGrowing: "rgba(41, 98, 255, 0.12)",
|
|
belowLineFillColorFalling: "rgba(41, 98, 255, 0.12)",
|
|
belowLineFillColorGrowingBottom: "rgba(41, 98, 255, 0)",
|
|
belowLineFillColorFallingBottom: "rgba(41, 98, 255, 0)",
|
|
symbolActiveColor: "rgba(41, 98, 255, 0.12)",
|
|
tabs: [
|
|
{
|
|
title: "Indices",
|
|
symbols: [
|
|
{ s: "FOREXCOM:SPXUSD", d: "S&P 500 Index" },
|
|
{ s: "FOREXCOM:NSXUSD", d: "US 100 Cash CFD" },
|
|
{ s: "FOREXCOM:DJI", d: "Dow Jones Industrial Average Index" },
|
|
{ s: "INDEX:NKY", d: "Japan 225" },
|
|
{ s: "INDEX:DEU40", d: "DAX Index" },
|
|
{ s: "FOREXCOM:UKXGBP", d: "FTSE 100 Index" },
|
|
],
|
|
originalTitle: "Indices",
|
|
},
|
|
{
|
|
title: "Futures",
|
|
symbols: [
|
|
{ s: "BMFBOVESPA:ISP1!", d: "S&P 500" },
|
|
{ s: "BMFBOVESPA:EUR1!", d: "Euro" },
|
|
{ s: "CMCMARKETS:GOLD", d: "Gold" },
|
|
{ s: "PYTH:WTI3!", d: "WTI Crude Oil" },
|
|
{ s: "BMFBOVESPA:CCM1!", d: "Corn" },
|
|
],
|
|
originalTitle: "Futures",
|
|
},
|
|
{
|
|
title: "Bonds",
|
|
symbols: [
|
|
{ s: "EUREX:FGBL1!", d: "Euro Bund" },
|
|
{ s: "EUREX:FBTP1!", d: "Euro BTP" },
|
|
{ s: "EUREX:FGBM1!", d: "Euro BOBL" },
|
|
],
|
|
originalTitle: "Bonds",
|
|
},
|
|
{
|
|
title: "Forex",
|
|
symbols: [
|
|
{ s: "FX:EURUSD", d: "EUR to USD" },
|
|
{ s: "FX:GBPUSD", d: "GBP to USD" },
|
|
{ s: "FX:USDJPY", d: "USD to JPY" },
|
|
{ s: "FX:USDCHF", d: "USD to CHF" },
|
|
{ s: "FX:AUDUSD", d: "AUD to USD" },
|
|
{ s: "FX:USDCAD", d: "USD to CAD" },
|
|
],
|
|
originalTitle: "Forex",
|
|
},
|
|
],
|
|
support_host: "https://www.tradingview.com",
|
|
backgroundColor: "#0f0f0f",
|
|
width: "100%",
|
|
height: "550",
|
|
showSymbolLogo: true,
|
|
showChart: true,
|
|
})
|
|
|
|
container.current.appendChild(script)
|
|
|
|
// Cleanup function
|
|
return () => {
|
|
if (container.current) {
|
|
// Remove initialization flag on unmount
|
|
delete container.current.dataset.initialized
|
|
// Remove all scripts
|
|
const scripts = container.current.querySelectorAll("script")
|
|
scripts.forEach((s) => s.remove())
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="tradingview-widget-container w-full" ref={container}>
|
|
<div className="tradingview-widget-container__widget"></div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(MarketOverview)
|