This repository has no description
1import React from 'react';
2import { Link, useNavigate } from 'react-router-dom';
3import './RelatedPagesNav.css';
4
5const RelatedPagesNav = ({ currentPage }) => {
6 // Define the pages and their properties
7 const pages = [
8 {
9 id: "about",
10 path: "/about",
11 title: "About cred.blue",
12 description: "Learn what cred.blue is and why it was created"
13 },
14 {
15 id: "methodology",
16 path: "/methodology",
17 title: "Scoring Methodology",
18 description: "Understand how the scoring algorithm works"
19 },
20 {
21 id: "definitions",
22 path: "/definitions",
23 title: "Definitions & Terms",
24 description: "Explore key terms and social status details"
25 }
26 ];
27
28 const navigate = useNavigate();
29
30 // Filter out the current page
31 const otherPages = pages.filter(page => page.id !== currentPage);
32
33 // Function to handle navigation and scroll to top
34 const handleNavigation = (path, e) => {
35 e.preventDefault();
36 navigate(path);
37 window.scrollTo(0, 0);
38 };
39
40 return (
41 <div className="related-pages-container">
42 <h3 className="related-pages-title">Related Pages</h3>
43 <div className="related-pages-links">
44 {otherPages.map(page => (
45 <a
46 key={page.id}
47 href={page.path}
48 className="related-page-link"
49 onClick={(e) => handleNavigation(page.path, e)}
50 >
51 <div className="related-page-content">
52 <h4>{page.title}</h4>
53 <p>{page.description}</p>
54 </div>
55 <span className="related-page-arrow">→</span>
56 </a>
57 ))}
58 </div>
59 </div>
60 );
61};
62
63export default RelatedPagesNav;