Merge pull request #2 from DeveloperMK07/Homepage

Implement Home Page With TradingView Widgets

Author: DeveloperMK07

app/(root)/page.tsx

@@ -1,9 +1,55 @@
+import TradingViewWidget from "@/components/TradingViewWidget";
 import {Button} from "@/components/ui/button";
+import { HEATMAP_WIDGET_CONFIG, MARKET_DATA_WIDGET_CONFIG, MARKET_OVERVIEW_WIDGET_CONFIG, TOP_STORIES_WIDGET_CONFIG } from "@/lib/constants";
 
 const Home = () => {
+
+    const scriptUrl =`https://s3.tradingview.com/external-embedding/embed-widget-`
     return (
         <div className="flex min-h-screen home-wrapper">
-            Home
+            <section className="grid w-full gap-8 home-section">
+                <div className="md:col-span-1 xl:col-span-1">
+                    <TradingViewWidget 
+                        title="Market Overview"
+                        scriptUrl={`${scriptUrl}market-overview.js`}
+                        config={MARKET_OVERVIEW_WIDGET_CONFIG}
+                        className="custom-chart"
+                        height={600}
+                    />
+                </div>
+
+                <div className="md-col-span xl:col-span-2">
+                     <TradingViewWidget 
+                        title="Stock HeatMap"
+                        scriptUrl={`${scriptUrl}stock-heatmap.js`}
+                        config={HEATMAP_WIDGET_CONFIG}
+                        // className="custom-chart"
+                        height={600}
+                    />
+                </div>
+            </section>
+
+            <section className="grid w-full gap-8 home-section">
+                <div className="h-full md:col-span-1 xl:col-span-1">
+                    <TradingViewWidget 
+                        // title="Market Overview"
+                        scriptUrl={`${scriptUrl}timeline.js`}
+                        config={TOP_STORIES_WIDGET_CONFIG}
+                        className="custom-chart"
+                        height={600}
+                    />
+                </div>
+
+                <div className="h-full md:col-span-1 xl:col-span-2">
+                     <TradingViewWidget 
+                        // title="Stock HeatMap"
+                        scriptUrl={`${scriptUrl}market-quotes.js`}
+                        config={MARKET_DATA_WIDGET_CONFIG}
+                        // className="custom-chart"
+                        height={600}
+                    />
+                </div>
+            </section>
         </div>
     )
 }

components/TradingViewWidget.tsx

@@ -0,0 +1,32 @@
+// TradingViewWidget.jsx
+'use client';
+import useTradingViewWidget from '@/hooks/useTradingViewWidget';
+import { cn } from '@/lib/utils';
+
+import React, { useEffect, useRef, memo } from 'react';
+
+interface TradingViewWidgetProps{
+    title?: string;
+    scriptUrl: string;
+    config: Record<string,unknown>;
+    height?: number;
+    className?: string;
+}
+
+const TradingViewWidget = ({ title, scriptUrl, config, height = 600, className }: TradingViewWidgetProps) => {
+    const containerRef = useTradingViewWidget(scriptUrl, config, height);
+
+
+
+  return (
+    <div className="w-full">
+        {title && <h3 className='font-semibold text-2xl text-gray-100 mb-5'>{title}</h3>}
+        <div className={cn("tradingview-widget-container", className)} ref={containerRef} style={{ height: "100%", width: "100%" }}>
+          <div className="tradingview-widget-container__widget" style={{ height, width: "100%" }}/>
+      </div>
+    </div>
+    
+  );
+}
+
+export default memo(TradingViewWidget);

hooks/useTradingViewWidget.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { useEffect,useRef } from "react";
+
+const useTradingViewWidget = (scriptUrl:string, config:Record<string,unknown>,height=600) => {
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(  () => {
+      if(!containerRef.current) return;
+      if(containerRef.current.dataset.loaded) return;
+      containerRef.current.innerHTML = `<div class="trading-widget-container__widget style="width:100%; height:${height}px;"></div>`;
+
+      const script = document.createElement("script");
+      script.src = scriptUrl;
+      script.async = true;
+      script.innerHTML = JSON.stringify(config);
+
+      containerRef.current.appendChild(script);
+      containerRef.current.dataset.loaded='true';
+
+      return () => {
+        if(containerRef.current){
+            containerRef.current.innerHTML ='';
+            delete containerRef.current.dataset.loaded;
+        }
+      }
+    },[scriptUrl,config,height])
+
+    return containerRef;
+}
+
+export default useTradingViewWidget