Frontend: Added a customizable and reusable heading component

[sksmagr23]

Description

I have created a highly customizable and reusable header component in src/library, and the styling is done using tailwind css and added various input fields as props.

I have also modified and updated my previously created playoptions page(which is merged) with this heading component. This heading component has various props which you can see in attached screenshot.

Fixes: #67

How to Test

• Run 'npm run dev' under frontend directory
• Navigate to /play and you can see use of customizable header component

Related Issues

• 67

Checklist

• [x] I have tested these changes locally.
• [x] I have reviewed the code and ensured it follows the project's coding guidelines.
• [x] I have updated the documentation, if necessary.
• [x] I have assigned reviewers to this pull request.

Screenshots

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
multiplayer-uno	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 7, 2024 9:13am

[kuv2707]

Please update the PR description to contain the clause Fixes: #issueno since that is what's used by github to associate the issue with the PR

[kuv2707]

Also, please add screenshots of dummy headings created using this component, demonstrating various configurations

[sksmagr23]

updated the description and added screenshot of dummy headings

[kuv2707]

Looks great!

[kuv2707]

Please amend the fixes clause in the commit message just like the description. Also restrict around 72 characters per line in the message.

You'd just need to run git commit --amend and insert line breaks as appropriate. Save the changes and exit, then run git push --force

It can be merged once these changes are made.

[sksmagr23]

@kuv2707 I have done the changes