Three React Components (character customizer, calendar display, and streak display)

We need someone to create two components for our React application. Attached labeled mockups illustrate the following descriptions. Character Customization of Pixel Avatars: This component will have a customization menu and character preview. In the customization menu, the player can switch between different categories (ex: sword, hair etc.) and select different customizations (ex: sword type, hair color and style etc.). In the character preview, they can see what their avatar looks like with the selected item. If applicable, clicking any item should also display its name and description in a field below (ex: swords do have names and descriptions, hair has no additional name/description). Items can be locked or unlocked. If an item is unlocked, clicking it should equip it. If it is locked, clicking it should not equip it. In addition to name and description, locked items should display cost and level to unlock. The next unlock-able item should have a buy button that is enabled if the player can afford the cost. Clicking this buy button should unlock and equip the item. We will provide images, names, descriptions, etc. for each item and category. All component wide data should be stored and handled with redux. The various items/customization categories should be dynamically loaded from a list in the reducer (so we can expand the customizations in the future). Lastly, the customized avatar should be its own component (so we can use it elsewhere in our product). Otherwise, the structure is up to you, but I've attached a diagram with an example of a component structure I think would work well. Calendar Display: The calendar display has two parts/milestones, the calendar and the streak visual. This component should be built to accept the following input: a list of objects, each composed of a datetime value and multiple integer values. The calendar on the left should look as pictured in the mockup, with the color of the dots corresponding to at least one of the integer values collected from the input object. Specifically, the dots should be grey if the integer value is 0 or undefined, and blue for any non-zero value, becoming darker blue the higher the respective value. Hovering over any bubble in either of the calendar or streak parts displays a tooltip with additional information. We're not done fully designing the streak visual, but we'll discuss this milestone further once we're finished.