Skip to content

HomePagination component#67

Open
yAlex78 wants to merge 3 commits intomainfrom
31-pagination-component-for-homepage
Open

HomePagination component#67
yAlex78 wants to merge 3 commits intomainfrom
31-pagination-component-for-homepage

Conversation

@yAlex78
Copy link
Copy Markdown
Contributor

@yAlex78 yAlex78 commented May 7, 2026

HomePagination component

Summary of changes

  • Added the HomePagination component that will handle switching between product pages on the home page. Doesn't currently do anything since the product listings haven't been implemented yet
  • The component accepts numbers representing the current page number (currentPage) and total number of pages (totalPages), and also a function that should be called when switching pages (onPageChange()). These props are passed in from the Homepage page.tsx
  • If totalPages > 6, the component will "hide" some of the page numbers with ..., always reserving the last slot for the last page number
  • Imported 2 SVG files into client/public, used in the HomePagination component (left arrow and right arrow)
  • Added another color to globals.scss (the light purple that you see when hovering over a page number in the component)

Video Demos

When totalPages <= 6:

pagination6pageDemo.mov

When totalPages > 6:

pagination10pageDemo.mov

How to Test

Run the frontend locally; the HomePagination component is already rendered on the home page (the positioning of the component on the home page is temporary and will be adjusted once product listings are implemented into the home page). In src/app/(pages)/(home)/page.tsx, you can change the value of totalPages to change the number of pages displayed in the component

@yAlex78 yAlex78 linked an issue May 7, 2026 that may be closed by this pull request
@yAlex78 yAlex78 requested a review from naomitzhao May 7, 2026 20:18
Copy link
Copy Markdown
Contributor

@naomitzhao naomitzhao left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fireee! This is just a tiny nit, but we just remove a few unused imports from these files before merging?

@@ -0,0 +1,98 @@
'use client';

import React from 'react';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this import is unused, could we remove it?

Comment on lines +3 to +5
import Image from 'next/image';
import styles from './page.module.scss';
import React, { useState } from 'react';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ik they weren't added in this PR, but could we remove the unused imports in this file? :P

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pagination component for Homepage

2 participants