Welcome to the second week of our developer challenge! This week, your task is to create a custom status component that will conditionally render based on the incoming text.
If you haven't completed the first week yet, it's recommended to do so before starting this week's challenge. You will build upon the code you wrote last week.
Unlike last week, where you were required to use the Table component, this week you have more freedom in how you can build the custom component. For the custom status, I used the Badge component and mapped the color scheme to numbers in an object acting as an enum, but you can take whatever path you want to achieve a similar functionality.
We also have an exciting bonus challenge for you! You have the option to replace the Table component you implemented in Week 1 with the more advanced and powerful AnalyticalTable component. While it may be more complex, it offers enhanced functionality.
If you're up for the challenge and want to level up your skills, feel free to switch your table component to AnalyticalTable. You will still need to complete the custom status component to earn credit for this week.
To help you achieve the goals for this week, the following resources (as well as those from last week) could be useful. You don't need to use all of them to complete the challenge, but they will assist you in whichever direction you choose.
Goal: Create a custom component in a separate file that uniquely displays the four statuses below and use in the table component created in last week’s challenge.
The four different statuses are:
To receive credit for completion, you need to accomplish three tasks:
1) Change the name of the title in App.tsx to include your name and “Week 2 – Custom Status Component”. It should resemble the title shown in the screenshot at the top of this post.
2) Create a custom status component in a new file to use in Solution.jsx. This component should dynamically render based on the status text. It should accept the status text as a prop and return a styled component. Each status should be a distinct color. If you forgot to add custom titles to the tasks from last week, make sure to do so now.
2.5) Switch your table component used in Week 1 to the AnalyticalTable component. This is fully optional. Let me know in the post with your screenshot if you implemented the AnalyticalTable and what your experience was.
3) Take a screenshot of your full table and header, similar to the screenshot at the top of this post, and post it in THIS discussion.
Note: If you encounter issues with your frontend not loading, ensure that you have imported all the necessary dependencies. Unfortunately, the debugging experience may not provide clear error messages. One useful approach is to comment out sections of code until the UI loads, then gradually uncomment to isolate the problematic line.