This repository has no description
1import React from 'react';
2import CircularLogo from '../UserProfile/CircularLogo';
3import SearchBar from '../SearchBar/SearchBar';
4import { Helmet } from 'react-helmet';
5import './ErrorPage.css';
6
7const ErrorPage = ({ title = "Page Not Found", message = "We couldn't find what you were looking for.", username = null, onNavigate }) => {
8 return (
9 <>
10 <Helmet>
11 <title>Not Found - cred.blue</title>
12 <meta name="description" content="The requested Bluesky account could not be found on cred.blue" />
13 </Helmet>
14
15 <main className="error-page">
16 <div className="error-content">
17 <CircularLogo
18 size={205}
19 />
20
21 <h1>{title}</h1>
22
23 {username ? (
24 <div className="error-message">
25 <p>
26 We couldn't find the Bluesky account "<strong>{username}</strong>".
27 </p>
28 <p>This might be because:</p>
29 <ul>
30 <li>The handle doesn't exist on Bluesky</li>
31 <li>The account has been deleted</li>
32 <li>There might be a typo in the URL</li>
33 </ul>
34 </div>
35 ) : (
36 <p className="error-message">{message}</p>
37 )}
38
39 <div className="search-section">
40 <p className="try-another">Try searching for another account:</p>
41 <SearchBar />
42 </div>
43 </div>
44 </main>
45 </>
46 );
47};
48
49export default ErrorPage;