added an image add button

[MilkaWarigia]

Description

This update introduces a functionality that enables users to pload images using a designated button, and preview them directly within the interface. This new feature is designed with an intuitive layout and leverages React's useState and useEffect hooks to manage image uploads and previews.

Summary of Changes:

• Added an image upload button for adding images to content sections.
• Integrated a preview feature that displays the uploaded image in real-time.
• Updated the CSS to support image styling and positioning within the content area.
• Modified layout components to handle and render uploaded images.

Type of Change/Additions

• New addition (non-breaking change which adds functionality)

How Has This Been Tested?

I have tested the image upload functionality by adding images in different formats (JPEG, PNG) to ensure compatibility and proper rendering. I verified that previews are displayed accurately and that uploaded files are correctly saved and retrieved in the app.

Instructions to Reproduce:

1. Run the application locally.
2. Click on the image upload button in the designated content section.
3. Select an image file and observe the preview display.
4. Verify that the uploaded image is correctly styled and positioned.

Test Configuration:

• Firmware version: N/A
• Hardware: HP
• Toolchain: Node.js v22.10.0, npm v10.9.0
• SDK: Next.js v15.0.0

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

[vercel]

@MilkaWarigia is attempting to deploy a commit to the swahilipothubdev's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
developers-profile	❌ Failed (Inspect)			Oct 28, 2024 1:19pm

[swahilipothub-dev]

@MilkaWarigia Resolve the conflicts on this please