projects screenshot & enhance component list design

[abdelrahman-mh]

Screenshot Generate For Each design & Some Enhancement 🔥

Generate a screenshot with puppeteer for every html file, so i edit a index.mjs and adds this:

• Auto generate a screenshot for each html component and save the images in ./screenshot directory using puppeteer

  • The screenshots size for current files is 11MB when run the compress-images-with-sharp they be just 3MB

• The screenshot images save with pattern ./screenshot/screenshot-<index>.png
• For generate a index.html file run npm run build

  • This will first delete the old screenshot directory and will build the react-examples, and after he will run index.mjs to generate a new screenshot for every html design

• add the images in a html file output, and improve some design architecture

Some others thing:

• Create a ./style.css to add simple style sheet to the design
• install compress-images-with-sharp because he in npm scripts but not installed ❔
• Also install puppeteer for handle screenshot generate
• Add a project image to README.md file, i first chose a best and details screenshots in the app and make a zoom-out and take a picture, i saved the image in ./docs/screenshot.png and import it to readme file

this is my second contribute in this repo so i hope he accepted 👍