addition of stock holdings list to the website

frontend/src/App.css

@@ -81,3 +81,29 @@ h1 {
   color: #F5F5F5; /* Color of the title */
   margin-left: -400px;
 }
+
+.stock-holdings {
+  margin-top: 20px;
+}
+
+.stock-button {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  margin: 10px 0;
+  width: 100%; /* Adjust as needed */
+  background-color: #f3f3f3; /* Light background for the button */
+  border: 1px solid #ccc;
+  cursor: pointer;
+}
+
+.stock-image {
+  width: 50px; /* Adjust as needed */
+  height: 50px;
+  margin-right: 15px;
+  border-radius: 50%; /* Circular image */
+}
+
+.stock-info .stock-name {
+  font-weight: bold;
+}

frontend/src/App.js

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import './App.css';
 import homeImage from './menu-con.jpg';
+import StockHoldings from './StockHoldings'; // Make sure this path is correct
 
 function App() {
   const [activeTab, setActiveTab] = useState('Overall Portfolio'); // default active tab
@@ -31,7 +32,8 @@ function App() {
       <header className="App-header">
         <h1>Overall Portfolio</h1>
       </header>
-      {/* Other components will go here */}
+      <StockHoldings/>
+      { /* Add the rest of your components here */}
     </div>
   );
 }

frontend/src/StockHoldings.js

@@ -0,0 +1,31 @@
+// StockHoldingsList.js
+import React from 'react';
+
+function StockHoldings() {
+  console.log('Rendering StockHoldings');
+  const holdings = [
+    // Replace with your actual data and images
+    { name: 'S&P 500', quantity: 10, value: '$1000', imageUrl: './VAUG.png' },
+    { name: 'Apple', quantity: 15, value: '$1500', imageUrl: './AAPL.png' },
+    { name: 'Palantir', quantity: 15, value: '$1500', imageUrl: './PLTR.png' },
+    // ... more stocks
+  ];
+
+  return (
+    <div className="stock-holdings">
+      <h2>My Stock Holdings</h2>
+      {holdings.map((stock, index) => (
+        <button key={index} className="stock-button">
+          <img src={stock.imageUrl} alt={stock.name} className="stock-image" />
+          <div className="stock-info">
+            <div className="stock-name">{stock.name}</div>
+            <div>{`${stock.quantity} shares`}</div>
+            <div>{`${stock.value}`}</div>
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default StockHoldings;