Hi Alisha and Phoebe! For this week I'd like you guys to work on some more atoms. If you checkout the Figma page, you'll see that we have some buttons where the background is a solid color (no distinguishable border) and the text is centered in the middle:
While this is similar to the Text Button we had you implement previously, the design is different enough to warrant a new atom. Inside of app/components/atoms create a new folder /solidbutton with a file index.tsx. Inside, implement a solid button similar to how you implemented the text button. The key is that we want this to be reusable across multiple parts of the application (so the text and the bg-color should be dynamically passed in as props, along with an onClick function).
Testing:
As with before, test your component out by rendering some examples of a solid-button inside of app/test/page.tsx. For example, you should try rendering some pink buttons for "Create Meeting" and "Generate Meeting Link". Include these testing components in your PR so we can easily check them ourselves locally.
Create a new branch:
solid-buttonTask:
Hi Alisha and Phoebe! For this week I'd like you guys to work on some more atoms. If you checkout the Figma page, you'll see that we have some buttons where the background is a solid color (no distinguishable border) and the text is centered in the middle:
While this is similar to the Text Button we had you implement previously, the design is different enough to warrant a new atom. Inside of
app/components/atomscreate a new folder/solidbuttonwith a fileindex.tsx. Inside, implement a solid button similar to how you implemented the text button. The key is that we want this to be reusable across multiple parts of the application (so the text and the bg-color should be dynamically passed in as props, along with an onClick function).Testing:
As with before, test your component out by rendering some examples of a solid-button inside of
app/test/page.tsx. For example, you should try rendering some pink buttons for "Create Meeting" and "Generate Meeting Link". Include these testing components in your PR so we can easily check them ourselves locally.