diff --git a/src/components/ContributorsPage.tsx b/src/components/ContributorsPage.tsx index 8c66797..0dc457e 100644 --- a/src/components/ContributorsPage.tsx +++ b/src/components/ContributorsPage.tsx @@ -111,6 +111,9 @@ export default function Component() { const [loading, setLoading] = useState(true); const [email, setEmail] = useState(''); + const [currentPage, setCurrentPage] = useState(1); + const contributorsPerPage = 9; + useEffect(() => { const fetchData = async () => { try { @@ -140,6 +143,17 @@ export default function Component() { fetchData(); }, []); + const indexOfLastContributor = currentPage * contributorsPerPage; + const indexOfFirstContributor = indexOfLastContributor - contributorsPerPage; + const currentContributors = contributors.slice( + indexOfFirstContributor, + indexOfLastContributor, + ); + + const paginate = (pageNumber: number) => setCurrentPage(pageNumber); + + const totalPages = Math.ceil(contributors.length / contributorsPerPage); + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log('Submitted email:', email); @@ -168,22 +182,9 @@ export default function Component() { > Shaping the future of GlasslyUI-Components, one commit at a time - - - Become a Contributor - - - {/* Stats Section */}

@@ -261,39 +262,36 @@ export default function Component() {

- {/* Contributors Grid */}

Meet Our Contributors

- - {loading ? ( - -
-
- ) : ( - - {contributors.map(contributor => ( - - ))} - - )} -
+
+ {currentContributors.map(contributor => ( + + ))} +
+ +
+ + +
- {/* Call to Action */}