Implement Home Page Content Components

[uparkalau]

To-Do List:

• [ ] Begin by creating a new branch from the develop branch. The branch name should be same of the task name feature/issue-number-description.

• [ ] Build the content components for the Home Page, which include:

  • User title component (e.g., "Hello, [User]")
  • Date display component (e.g., "Today is [Day], [Date]")
  • Statistic cards displaying metrics such as "Monthly active users," "Tour views," etc.
  • CreateActivityButton "Create a tour" button component and others activities.

• [ ] Ensure that each component is customizable through props and use the project default styles and color themes.

• [ ] Make sure to apply the project's default styles (./HomePageContentStyles.css) to the components. Modify the CSS file to support the new components, using constants for colors and styles that align with the global theme.

• [ ] Define PropTypes for each new component to ensure proper prop validation.

• [ ] Create test cases to verify that the components render correctly with different props.

Props examples:

UserTitle.propTypes = {
  userName: PropTypes.string.isRequired,
};
DateDisplay.propTypes = {
  dayOfWeek: PropTypes.string.isRequired, 
  date: PropTypes.string.isRequired,
};
StatisticCard.propTypes = {
  metricName: PropTypes.string.isRequired,
  metricValue: PropTypes.number.isRequired,
  changeType: PropTypes.oneOf(['increase', 'decrease']), 
};
CreateActivityButton.propTypes = {
  iconName: PropTypes.string.isRequired,
  placeholder: PropTypes.string,
  onButtonClick: PropTypes.func.isRequired,
};

Visual Reference:

The design and functionality expected for the Home Page content are based on the provided image. https://www.figma.com/design/MLPbP1HM2L9ON6f88pHTee/User-onboarding?node-id=11-37642&t=AhexSZE5D9WsJT08-4