Portfolio Management

[elicharlese]

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Card, CardContent, Typography } from '@material-ui/core';

const useStyles = makeStyles({
  root: {
    minWidth: 275,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  value: {
    fontSize: 36,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  description: {
    fontSize: 14,
  },
});

const PortfolioOverview = ({ value, description }) => {
  const classes = useStyles();

  return (
    <Card className={classes.root}>
      <CardContent>
        <Typography className={classes.title} gutterBottom>
          Portfolio Overview
        </Typography>
        <Typography className={classes.value}>
          {value}
        </Typography>
        <Typography className={classes.description} color="textSecondary">
          {description}
        </Typography>
      </CardContent>
    </Card>
  );
};

export default PortfolioOverview;

This component is a simple card component that displays a portfolio overview with a title, value, and description. The makeStyles function is used to define the styles for the component, and the Card, CardContent, and Typography components are imported from Material-UI to create the card layout.

To use this component, simply pass in the value and description props as needed. For example, you could use it like this:

<PortfolioOverview value="$1,000,000" description="Total value of assets in the hedge portfolio" />

This would display a card with the title "Portfolio Overview", the value "$1,000,000", and the description "Total value of assets in the hedge portfolio".