search

purnima143 / Pluto-UI

Pluto UI is a comprehensive React UI component library designed for ecommerce websites. It provides a wide range of reusable and customizable UI elements to enhance the user experience of your online store.
MIT License
27 stars 52 forks source link

Added Product grid and list components #85

Closed shivam-jainn closed 1 year ago

shivam-jainn commented 1 year ago

Description

I have added two new components : 1) Product List 2) Product Grid

solves issue #71

Changes Made

1) Relocated the star component to it's own component folder 2) Added Product list card 3) Added Product grid card

Testing

Went through and checked how it works on different viewports

Screenshots (if applicable)

PRODUCT GRID

product grid default

image

product grid dark mode

image

Product list

product grid default

image

product grid dark mode

image

AdityaSingh-02 commented 1 year ago

Hey @shivam-jainn Thanks for contributing ❤️, does it have a grid view as it was mentioned in issue #71 you had added image for the list view but I can't see a grid view, I wonder if you could attach that too, Or if its not go ahead and make one

shivam-jainn commented 1 year ago

Hey @shivam-jainn Thanks for contributing heart, does it have a grid view as it was mentioned in issue #71 you had added image for the list view but I can't see a grid view, I wonder if you could attach that too, Or if its not go ahead and make one

I have made some updates to the grid component and separated the grid's card and grid functionality into separate files. However, I would like to discuss how to form grids easily using Storybook.

Here's the current state of the code:

  1. Grid Component:

    • The grid component is defined as a functional component.
    • It receives a data prop, which is currently hardcoded with sample data.
    • The grid component renders a div with the productGrid class to wrap the grid.

  2. Mapping the Data:

    • The grid component maps over the data array to generate the ProductGridCard components.
    • Each item in the data array contains properties such as description, price, productimage, title, darkmode, and noOfStars.
    • These properties are passed as props to the ProductGridCard component.

  3. Hardcoded Data:

    • Currently, the data array is hardcoded within the grid component.
    • While this approach works, it would be more flexible to load the data from an external source, such as a JSON file.

Next Steps and Discussion Points:

  1. External Data Source:

    • Consider loading the data for the grid from a JSON file.
    • This would allow for easier management and updating of the grid data.

  2. Integration with Storybook:

    • Explore how to integrate the grid component with Storybook.
    • Storybook can help in visualizing and interacting with components in an isolated and controlled environment.

  3. Dynamic Data:

    • Discuss how to make the grid component more dynamic.
    • For example, explore options for fetching data from an API or allowing users to customize the grid data.

By addressing these points, we can enhance the grid component's flexibility, maintainability, and reusability. Let's discuss and find the best approach for our requirements.

Please review the code changes and share your thoughts. Let me know if you have any questions or if there's anything specific you'd like to discuss.

image