Creating asset info component and page

[TheRealLowyer]

Overview

This pull request introduces the AssetInfo page, designed to provide users with a detailed view of financial asset data, including performance charts, key information, and relevant news. The page layout and components are responsive, user-friendly, and align with the project's design standards.

---

Key Features

1. Asset Information Display:

   • Added the AssetInfoWidget component to showcase essential details about the selected asset.
   • The widget supports dynamic asset selection through a symbol prop (e.g., NASDAQ:AAPL).

2. Interactive Chart Integration:

   • Integrated the ChartContainer component below the AssetInfoWidget to display real-time performance charts using the TradingView widget.
   • Ensures a seamless user experience for tracking asset trends over time.

3. News Widget:

   • Created the NewsWidget component to display relevant financial news on the asset.
   • Positioned at the center-right of the page for quick access without disrupting the primary content flow.

4. Responsive Layout:

   • Developed a clean and modern responsive layout using CSS modules (AssetInfo.module.css).
   • Ensures an optimal viewing experience on devices of all sizes.

---

Layout Structure

• Top Section:
  • Title: "Asset Information," centered for clear navigation.
• Center-Right Sidebar:
  • NewsWidget: Displays the latest financial news and updates.
• Main Content:
  • AssetInfoWidget: Positioned at the top to display asset details.
  • ChartContainer: Placed below the asset info for performance visualization.

---

Technical Details

• Dynamic Symbol Prop:

  • The symbol prop is utilized across components for scalability and reusability.
  • Example: <AssetInfoWidget symbol="NASDAQ:AAPL" /> and <ChartContainer symbol="NASDAQ:AAPL" />.

• CSS Modules:

  • Styles are scoped using modular CSS to prevent global conflicts and enhance maintainability.
  • File: AssetInfo.module.css.

• Responsive Design:

  • Leveraged flexbox and media queries to create a layout that adapts to various screen sizes.
  • Sidebar (NewsWidget) stacks below the main content on smaller screens.

---

Benefits

• User Experience:

  • Intuitive layout and component placement for easy navigation.
  • Integrated charts and news provide comprehensive asset insights at a glance.

• Scalability:

  • Components (AssetInfoWidget, ChartContainer, NewsWidget) are reusable and can be extended to support additional features or assets.

• Performance:

  • Asynchronous loading of TradingView widgets for efficient rendering.

---

Future Enhancements

• Dynamic Asset Selection:

  • Enable users to select and view different assets dynamically.

• Real-Time News Integration:

  • Enhance the NewsWidget with live updates from financial news APIs.