Add src/app/chart/page.tsx

2026-05-07 20:12:43 +00:00
parent becbf71713
commit a530f462bc
1 changed files with 83 additions and 0 deletions
--- a/src/app/chart/page.tsx
+++ b/src/app/chart/page.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useSearchParams } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import FooterBase from "@/components/sections/footer/FooterBase";
+import ReactLenis from "lenis/react";
+
+export default function ChartPage() {
+  const searchParams = useSearchParams();
+  const pair = searchParams.get("pair") || "EURUSD";
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
+    script.type = "text/javascript";
+    script.async = true;
+    script.innerHTML = JSON.stringify({
+      "autosize": true,
+      "symbol": `FX:${pair}`,
+      "interval": "D",      "timezone": "Etc/UTC",      "theme": "dark",      "style": "1",      "locale": "en",      "enable_publishing": false,
+      "hide_side_toolbar": false,
+      "allow_symbol_change": true,
+      "support_host": "https://www.tradingview.com"
+    });
+    if (container.current) {
+      container.current.innerHTML = "";
+      container.current.appendChild(script);
+    }
+  }, [pair]);
+
+  const currencyPairs = [
+    { name: "EUR/USD", href: "/chart?pair=EURUSD" },
+    { name: "GBP/USD", href: "/chart?pair=GBPUSD" },
+    { name: "USD/JPY", href: "/chart?pair=USDJPY" },
+    { name: "AUD/USD", href: "/chart?pair=AUDUSD" }
+  ];
+
+  return (
+    <ThemeProvider 
+        defaultButtonVariant="expand-hover" 
+        defaultTextAnimation="background-highlight" 
+        borderRadius="soft" 
+        contentWidth="mediumSmall" 
+        sizing="mediumLargeSizeLargeTitles" 
+        background="floatingGradient" 
+        cardStyle="outline" 
+        primaryButtonStyle="gradient" 
+        secondaryButtonStyle="solid" 
+        headingFontWeight="normal"
+    >
+        <ReactLenis root>
+            <div id="nav" data-section="nav">
+                <NavbarStyleApple
+                    navItems={[
+                        { name: "Dashboard", id: "/" },
+                        ...currencyPairs.map(p => ({ name: p.name, id: p.href }))
+                    ]}
+                    brandName="ForexFlow"
+                />
+            </div>
+
+            <div style={{ height: "85vh", width: "100%", padding: "2rem" }}>
+                <h1 style={{ marginBottom: "1rem" }}>{pair} Advanced Chart</h1>
+                <div ref={container} style={{ height: "100%", width: "100%" }} />
+            </div>
+
+            <div id="footer" data-section="footer">
+                <FooterBase
+                    columns={[
+                        { title: "Product", items: currencyPairs.map(p => ({ label: p.name, href: p.href })) },
+                        { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Community", href: "#" }] },
+                        { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy Policy", href: "#" }] },
+                    ]}
+                    logoText="ForexFlow"
+                />
+            </div>
+        </ReactLenis>
+    </ThemeProvider>
+  );
+}