Card Component + Page Skeletons

[Satchel05]

AT A GLANCE

LoFi is here! 🎉

Your task covers several small items. Reference LoFi for the components.

1. Custom card component
2. Static page skeletons like page headers and static buttons for two pages: Quota Tracking page and User Directory page

CONTEXT

Miscellaneous components. React Router routes (different from backend routes) will end up being the parent for the components your peers are developing.

TECHNICAL DETAILS

• Switch to main branch and pull the most up to date code.
• Our branch names were a little haphazardly named last time (our fault). In order to have more consistent and professional branch names, please click "Create a branch for this issue..." under "development" in the right sidebar on this page. It should automatically populate your branch name with a name of this format: 23-create-crud-routes-tags-route. Importantly, also git checkout this new branch locally in VSCode. You will need to git pull again to get local in sync with the new branch you just created remotely on GitHub.
• Feel free to use Playground.jsx as a sandbox to test your components.

Custom Card Component

• Create customCard.jsx in src/components/
• You will need to create this component in such a way that it is able to accept the sufficient props to be able to dynamically adapt to every card found in Quota Tracking & User Directory pages.

Quota Tracking & User Directory pages

• Create QuotaTrackingPage.jsx in src/components/
• Create UserDirectoryPage.jsx in src/components/
• Match page headings, subheadings, to LoFi.

• Match cards using CustomCard.

• Create a new React Router route for each of these pages in App.tsx

LEARNING GOALS

What's Important To Understand:

• How to use React Router

RESOURCES

• LoFi
• Card
• Calendar Dropdown Componenet