Issue created with ChatGPT models' help¹
Description
This epic focuses on implementing the Saved Projects page, where projects bookmarked from the map (via the ProjectTitle component) are displayed in a structured table view¹. When a user clicks the bookmark icon on a project, a new row should be added to this page dynamically².
The page will follow the Figma design and include a table layout with columns (Project Name, Location, Date Created, Date Updated) along with pagination and filtering capabilities³. The primary goal is to build a fully functional UI with component-based architecture, while ensuring extensibility for backend integration later⁴.
Goals
- Display saved projects in a table format¹
- Add new project row when bookmark is clicked²
- Enable navigation from saved project → map view³
- Match Figma layout and styling exactly⁴
- Implement reusable components (table, pagination, filters)¹
- Ensure scalable structure for future backend integration²
- Please make table responsive as much possible for smaller screens
Implementation Instructions
-
Create Saved Projects page layout container¹
-
Listen to bookmark/save action from ProjectTitle component²
-
Store saved projects (local state or temporary storage)³
-
Render saved projects in table format⁴
-
Make project name clickable → navigate to map view¹
-
Create reusable components:
- Table component²
- Pagination component³
- Filter component⁴
-
Apply exact Figma layout specs (see below)¹
-
Ensure responsive and clean UI behavior²
-
Add basic routing integration for navigation³
-
Add placeholder validation/testing logic⁴
-
Please make table responsive as much possible for smaller screens
Layout Specs (Figma)
Main Container
- Width: 1146px¹
- Height: 291px²
- Padding: 16px³
Saved Projects Header
- Width: 1114px¹
- Height: 33px²
- Gap: 10px³
- Padding-left/right: 2px⁴
Row Spacer
- Width: 1114px¹
- Height: 24px²
Table Container
- Width: 1114px¹
- Height: 202px²
- Border-radius: 16px³
- Background: #FFFFFF⁴
Table Body
- Width: 1114px¹
- Height: 144px²
- Border-radius: 4px³
- Background: #FFFFFF⁴
Project Name Column
- Width: 564px¹
- Height: 144px²
Heading
- Height: 48px¹
- Padding: 10px top/bottom, 16px left/right²
Heading Text
- Font-weight: SemiBold¹
- Font-size: Body SM²
- Color: #757575³
Filter Icon
- Size: 12x18¹
- Font: Font Awesome²
- Color: #00000042³
Values (Clickable Rows)
- Height: 48px¹
- Padding: 14px top/bottom, 16px left/right²
- Background: #FFFFFF³
- Box-shadow: inset border⁴
Value Link Text
- Font-weight: Light¹
- Font-size: Body MD²
- Color: #01579B³
👉 On click:
- Navigate to: Ecosystem Map > Bluff > Info¹
- Animation: Instant (0ms)²
Other Columns
Location Column
Date Created Column
Date Updated Column
Footer (Pagination)
- Width: 1114px¹
- Height: 58px²
- Gap: 32px³
- Padding-left/right: 8px⁴
Pagination Text
- Text: "1 - 2 of 2"¹
- Font-size: Body XS²
- Color: #000000DE³
Navigation Buttons
- Size: 32x32¹
- Border-radius: 32px²
- Type: plain³
- Includes forward and back buttons⁴
Acceptance Criteria
Sub-Issues
Resources
¹ https://react.dev/learn/sharing-state-between-components
² https://react.dev/learn/conditional-rendering
³ https://developer.mozilla.org/en-US/docs/Web/CSS/flex
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Figma Design (Full Details): https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0
Issue created with ChatGPT models' help¹
Description
This epic focuses on implementing the Saved Projects page, where projects bookmarked from the map (via the ProjectTitle component) are displayed in a structured table view¹. When a user clicks the bookmark icon on a project, a new row should be added to this page dynamically².
The page will follow the Figma design and include a table layout with columns (Project Name, Location, Date Created, Date Updated) along with pagination and filtering capabilities³. The primary goal is to build a fully functional UI with component-based architecture, while ensuring extensibility for backend integration later⁴.
Goals
Implementation Instructions
Create Saved Projects page layout container¹
Listen to bookmark/save action from ProjectTitle component²
Store saved projects (local state or temporary storage)³
Render saved projects in table format⁴
Make project name clickable → navigate to map view¹
Create reusable components:
Apply exact Figma layout specs (see below)¹
Ensure responsive and clean UI behavior²
Add basic routing integration for navigation³
Add placeholder validation/testing logic⁴
Please make table responsive as much possible for smaller screens
Layout Specs (Figma)
Main Container
Saved Projects Header
Row Spacer
Table Container
Table Body
Project Name Column
Heading
Heading Text
Filter Icon
Values (Clickable Rows)
Value Link Text
👉 On click:
Other Columns
Location Column
Date Created Column
Date Updated Column
Footer (Pagination)
Pagination Text
Navigation Buttons
Acceptance Criteria
Sub-Issues
Resources
¹ https://react.dev/learn/sharing-state-between-components
² https://react.dev/learn/conditional-rendering
³ https://developer.mozilla.org/en-US/docs/Web/CSS/flex
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Figma Design (Full Details): https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0