Internal View: Categories Page

[idil-bit]

!!! DUE DEC 10TH !!!

Purpose

You will be working on the categories page! You will be importing the dropdown and spreadsheet components from components/NameDropdown.tsx and components/CategoriesSpreadsheet.tsx (which you will create as part of this ticket). Then you'll also use some other html elements to build the basis of this page so we can later populate it! Right now, this will be how the page will look when it is first landed on. The user will be able to choose an option on the dropdown so that they can see the category-specific info they want - but that's a later step :)

TODO

• Move this ticket to the In Progress column
• Get updated with the codebase (git checkout dev, git pull, create a new branch by git checkout -b [branchname] as per README, npm install to update your dependencies, npm run dev)
• Create and open categories/page.tsx
• Play around with the Figma design (click picture below to go to the associated page)
  • Observe that the spreadsheet is empty til a category is chosen.
• Add the title in
• Import and add the dropdown (components/NameDropdown.tsx) in
  • Create dummy data to pass to this dropdown before the return (you can look at other parts of the code that use NameDropdown for reference)
• Add the "Add Category" button
  • This button will not have any functionality when clicked
  • Add styling for when it is hovered over (slightly darken the color)
• Create components/CategoriesSpreadsheet.tsx and import it to categories/page.tsx
  • Refer to the code in inventory/page.tsx to see how you can send in dummy data as a parameter, where they sent it to components/InventorySpreadsheet.tsx. Current dummy data will be empty so that the spreadsheet is not populated.
  • Refer to the code in components/InventorySpreadsheet.tsx and Figma designs to create the empty form of the spreadsheet
• Add the "Select a category." text in the center - this will only be shown if a category is not selected in the dropdown, so use a boolean variable to represent this information (check out the state and && resources below)
• create a PR for this ticket
  • add yourselves as assignees and Jiyoon as the reviewer to the PR
• move this ticket to the Ready for Review column

Helpful Resources

About the font/boldness: In your tailwind styling, you can use: crimson-bold, crimson-semibold, crimson-regular, as Jiyoon pre-set in our globals.css. You can also just customize the thickness yourself - up to you!

1. Tailwind table layout: https://tailwindcss.com/docs/table-layout
2. React's map function that would help go through no more than necessary rows: https://legacy.reactjs.org/docs/lists-and-keys.html
3. Props: https://react.dev/learn/passing-props-to-a-component
4. Use Figma's functionalities to your advantage! Remember you can copy and download icons by right clicking like in the following photo!
5. React useState and setState: https://codedamn.com/news/reactjs/usestate-hook-typescript
6. Visibility and using &&: https://www.dhiwise.com/post/the-ultimate-guide-to-react-click-outside-modal-to-close#:~:text=16-,Integrating%20the%20Modal%20into%20a%20React%20App,-Importing%20and%20Rendering

Pictures (click to get to its figma)