[TASK-16] Implement Mood Selector Component for Frontend

[abedmohammed]

[TASK-16] Implement Mood Selector Component for Frontend

Goal:
Develop a mood selector component for the frontend, allowing users to select their mood and rate it on a scale.

Requirements:

1. Design the Mood Selector UI:

   • Create a popup modal or overlay component that displays mood options.
   • Use icons to represent various mood options (e.g., joy, sadness, emptiness, heartbroken).
   • Display mood options in a circular or radial layout, allowing easy selection.

2. Implement Mood Rating Scale:

   • Include a rating scale (e.g., 1-10) to allow users to rate the intensity of their selected mood.
   • Use a draggable or clickable scale, as shown in the mockup.

3. Mood Selection and Rating Functionality:

   • Allow users to select a mood icon and adjust the rating on the scale.
   • Highlight the selected mood and scale position for visual feedback.
   • Add a "Submit" button to confirm the mood selection and rating.

Notes:

• Don't follow this exact mockup design
• Stick to the theme
• Be creative and make it whichever way you feel is best, just make sure its a reusable component that can be placed around the site and that its a button which is when clicked, opens up the modal window with the selector