Creating asset info component and page

web/tradeverse/src/components/structure/AssetInfoWidget.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+const AssetInfoWidget = ({ symbol }) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-symbol-profile.js';
+    script.async = true;
+    script.innerHTML = JSON.stringify({
+      width: "800",
+      height: "400",
+      isTransparent: true,
+      colorTheme: "light",
+      symbol: symbol, // Use the prop value here
+      locale: "en",
+    });
+
+    containerRef.current.appendChild(script);
+
+    return () => {
+      // Cleanup: Remove the script when the component unmounts
+      if (containerRef.current) {
+        containerRef.current.innerHTML = '';
+      }
+    };
+  }, [symbol]); // Re-run the effect if the symbol changes
+
+  return (
+    <div className="tradingview-widget-container" ref={containerRef}>
+      <div className="tradingview-widget-container__widget"></div>
+      <div className="tradingview-widget-copyright">
+
+      </div>
+    </div>
+  );
+};
+
+AssetInfoWidget.propTypes = {
+  symbol: PropTypes.string.isRequired, // Ensure the symbol is passed as a required prop
+};
+
+export default AssetInfoWidget;

web/tradeverse/src/components/structure/navigation.js

@@ -3,6 +3,7 @@ import About from "../../pages/About"
 import Login from "../../pages/Login"
 import SignUp from "../../pages/SignUp"
 import Search from "../../pages/Search"
+import AssetInfo from "../../pages/AssetInfo"
 
 export const nav = [
      { path:     "/",         name: "Home",        element: <Home />,       isMenu: false,     isPrivate: false  , isAdmin:false},
@@ -13,6 +14,6 @@ export const nav = [
      { path:    "/notfound", name: "Not Found",  element: <Home />,   isMenu: false,    isPrivate: false  , isAdmin:false},
      { path:   "/notauthorized", name: "Not Authorized", element: <Home />, isMenu: false, isPrivate: false  , isAdmin:false},
      { path: "/adduser", name: "Add User", element: <Home />, isMenu: false, isPrivate: false, isAdmin: false },
-     { path: "/search", name: "Search", element: <Search />, isMenu: false, isPrivate: false, isAdmin: false }, 
-
+     { path: "/search", name: "Search", element: <Search />, isMenu: false, isPrivate: false, isAdmin: false },
+     { path: "/asset", name: "Asset", element: <AssetInfo />, isMenu: false, isPrivate: false, isAdmin: false },
 ]

web/tradeverse/src/pages/AssetInfo.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AssetInfoWidget from '../components/structure/AssetInfoWidget';
+import ChartContainer from '../components/structure/TradingViewWidget';
+import NewsWidget from '../components/structure/NewsWidget';
+import styles from './styles/AssetInfo.module.css'; // Import the CSS module
+
+const AssetInfo = () => {
+    return (
+        <div className={styles.assetInfoPage}>
+            <div className={styles.contentContainer}>
+                <div className={styles.mainContent}>
+                    <AssetInfoWidget symbol="NASDAQ:AAPL" />
+                    <ChartContainer symbol="NASDAQ:AAPL" />
+                </div>
+                <div className={styles.sidebar}>
+                    <NewsWidget  symbol="NASDAQ:AAPL"/>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AssetInfo;

web/tradeverse/src/pages/styles/AssetInfo.module.css

@@ -0,0 +1,55 @@
+/* General page styling */
+.assetInfoPage {
+    font-family: 'Arial', sans-serif;
+    background-color: #f9f9f9;
+    color: #333;
+    padding: 20px;
+    margin: 0 auto;
+    max-width: 1200px;
+    border-radius: 8px;
+}
+
+/* Title styling */
+.pageTitle {
+    text-align: center;
+    font-size: 2.5rem;
+    color: #0056b3;
+    margin-bottom: 30px;
+}
+
+/* Layout container */
+.contentContainer {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+/* Main content styling */
+.mainContent {
+    flex: 3;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+/* Sidebar styling */
+.sidebar {
+    flex: 1;
+    background: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-height: fit-content;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .contentContainer {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        max-width: 100%;
+    }
+}