Enhance User Interface and Functionality for Authenticated Users | React JS

[NayakPenguin]

Issue Description:

The current user interface (UI) has a few improvements that need to be made to enhance the user experience, especially for authenticated users. Based on the provided image, two tasks are identified:

Task 1: Conditional UI for Authenticated Users

When a user is signed in, the UI should not display the login button. Instead, it should greet the user with a "Welcome, [user's name]" message.
Ensure that the below-created sheets are only visible if the user is logged in, as this behavior is expected.

Task 2: Dynamic Sheet Creation

When the "Add New" button is clicked, a specific functionality needs to be implemented:
Show three input fields (no CSS styling required) where the user can input the necessary data for creating a new sheet.
After inputting the required information, a new sheet should be created and displayed to the user.

Additional Information:

Please ensure that the "Welcome" message displays the user's name dynamically.
The UI should respond to the user's authentication status to show or hide relevant elements.
When creating a new sheet, consider capturing the necessary data and updating the UI to reflect the new sheet's addition. The backend logic should also be implemented to handle sheet creation and storage.

Expected Outcome:

Authenticated users should see a "Welcome" message with their name and have access to the created sheets.
Clicking the "Add New" button should reveal the input fields for new sheet creation, with a new sheet being added after filling in the required details.

[priyam-03]

Hi @Nayaker I am interested to work in this issue