[New Homepage] 4-b: Add component UseCases

[mamadoudicko]

Epic:#1232

Functional:

• Add UseCases components
• Data are from local for now
• Setup a structure to be able to fetch data from CMS

Strat tech:

• In (home)/components, create a component UseCases which will contains some use cases for Quivr

Validation:

• Activate onboarding on Growthbook
• Go to homepage
• Check there is use cases section
• Check that some use cases are here
• Check that it is iso design

Design

[dosubot]

🤖

Hello,

To add the UseCases component to the Quivr homepage, you can follow the steps below:

1. Create a new file in the (home)/components directory named UseCases.tsx. This file will contain the UseCases component.

2. In the UseCases.tsx file, you can start by creating a functional component that fetches data locally. Here's a basic structure to get you started:

import React from 'react';

const UseCases = () => {
  // Fetch data locally
  const data = [
    // Your local data here
  ];

  return (
    <div>
      {/* Render your use cases here using the local data */}
    </div>
  );
};

export default UseCases;

3. Import the UseCases component in the HomePage component and add it to the render method. Here's how you can do it:

import UseCases from './components/UseCases'; // Import the UseCases component

// In the render method
<UseCases /> // Add the UseCases component

Please note that this is a basic implementation and you might need to adjust it according to your needs. For example, you might need to add state management to handle the fetched data, or add props to the UseCases component to make it more reusable.

Regarding the design, I'm sorry but I can't see the images you provided. Could you please describe the design in words or provide the design specifications?

For the validation, you can add tests to check if the use cases section is present on the homepage and if it contains some use cases. You can use a testing library like Jest or React Testing Library for this. Here's a basic example of how you can do it:

import { render, screen } from '@testing-library/react';
import HomePage from './HomePage';

test('renders use cases section', () => {
  render(<HomePage />);
  const useCasesSection = screen.getByTestId('use-cases-section');
  expect(useCasesSection).toBeInTheDocument();
});

test('renders some use cases', () => {
  render(<HomePage />);
  const useCases = screen.getAllByTestId('use-case');
  expect(useCases.length).toBeGreaterThan(0);
});

Please note that this is a basic example and you might need to adjust it according to your needs. For example, you might need to add more tests to check if the use cases match the provided design.

I hope this helps! If you have any other questions, feel free to ask.

Best,
Dosu

Sources

• frontend/app/(home)/page.tsx
• frontend/app/(home)/components/index.ts

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[github-actions]

Thanks for your contributions, we'll be closing this issue as it has gone stale. Feel free to reopen if you'd like to continue the discussion.