Remember: if you have an issue specific to your code that you’re struggling with, you should strongly consider posting your specific questions in the help or module channels in the Scrimba Discord community.

General Advice

The biggest challenge in this solo project is the challenge of decisions. You’re the creator of this component library, and you need to figure out how to balance keeping designs congruent across the whole library, while making certain parts of it flexible and reusable when it makes sense to do so.

E.g. with a banner component, you’ll need to decide if you want people to be able to stuff images, links, tables, etc. in the banner, or if you want to limit its exposed API to just the title and text on the banner.

Suggestions

Badges

• Allow a color prop to be passed in, and let the Badge component determine the associated background and text colors based on the value of that prop.
• E.g. when using the Badge component, doing <Badge color="green" /> would automatically set the background color to #D1FAE5 and the text color to #065F46 according to the Figma Design for the green badge.

Banners

• Think about whether you want components like this to have a rigid structure (e.g. ONLY allow a title and a text prop), or to possibly have any kind of information placed in them (e.g. using children).
• Like with Badges, allow a status prop (success, warning, etc.) and have the Banner component set the colors internally based on the status.
• You should be able to achieve the “multi line” and “single line” variations solely based on conditional rendering and CSS rules

Cards

• Like Banners, you’ll get to decide how rigid or flexible you want these to be.
• Assuming you always want the icon on the top like in the design, you’ll need to determine whether a prop or children is best for this.
• Consider setting a default icon if none is provided
• Consider allowing the user to choose the icon background color
• Remember that JSX can be passed as a value via props just like any other data type (JSX just compiles to regular ol’ JS objects)
Copy

<Card icon={<IconHere />} />  // completely valid

Testimonials

• You’ll need to decide if you think it’s worth overloading the Testimonial component so it can change it’s display based on whether an image is passed in or not, OR if it makes more sense to just create 2 separate components, e.g. TestimonialWithImage and TestimonialWithoutImage)
• Don’t feel like you need to strictly stick to the designs in Figma. If you want to make the Testimonial with no picture have a color background, you go ahead 🙂
• Again, you’ll likely need to determine the balance between the use of props and children in this component.

Tooltips

Toasts

• Consider looking into React Portals to help place the toasts absolutely positioned to the document body instead of relative to whatever nested element you’re rendering them from. This way, you should be able to always have them pop up in the (e.g.) lower right of the screen, but still trigger them to be rendered from within a deeply nested component.
• Alternatively, you could set up a Provider context that wraps the whole app and conditionally renders a toast based on state that is changeable by a deeply nested component. However, the React Portals way feels simpler to me…