refactor: Move the message list to its own component

[wheval]

Fixes Issue

My PR closes #663

👨‍💻 Changes proposed(What did you do ?)

1. Fixed change the span to a button for the is bads words element #666
2. Fixed use the logical AND operator to display the message when the user tries to show a bad word #667
3. Created a component for BadWordsMessage
4. Created a component for MessagesList

✔️ Check List (Check all the applicable boxes)

• [x] My code follows the code style of this project.
• [x] This PR does not contain plagiarized content.
• [x] The title and description of the PR is clear and explains the approach.

Note to reviewers

📷 Screenshots

[vercel[bot]]

@wheval is attempting to deploy a commit to the dunsin's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Dun-sin]

@wheval also screenshots should be of the working code, i.e website being up and runing with the area where your change was done as a screen recording if it's not a basic UI change

[Dun-sin]

hi @wheval the time assigned to this Issue is over, your PR is now closed. Thanks for trying to contribute, you're free to ask to work on other issues, if you can meet up with the time assigned.