Skip to content

Commit f55ed0a

Browse files
switzswitz
committed
Add HomePage
1 parent 5979e12 commit f55ed0a

File tree

5 files changed

+130
-20
lines changed

5 files changed

+130
-20
lines changed

‎public/HomePage.jpg‎

55.3 KB
Loading

‎src/app/(browse)/error.tsx‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
'use client';
2+
3+
import { useEffect } from 'react';
4+
5+
export default function Error({
6+
error,
7+
reset,
8+
}: {
9+
error: Error & { digest?: string };
10+
reset: () => void;
11+
}) {
12+
useEffect(() => {
13+
console.error('Application error:', error);
14+
}, [error]);
15+
16+
return (
17+
<div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
18+
<div className="mx-auto w-full max-w-lg text-center">
19+
<div className="mb-8">
20+
<div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-red-100">
21+
<svg
22+
className="h-10 w-10 text-red-600"
23+
fill="none"
24+
stroke="currentColor"
25+
viewBox="0 0 24 24"
26+
>
27+
<path
28+
strokeLinecap="round"
29+
strokeLinejoin="round"
30+
strokeWidth={2}
31+
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
32+
/>
33+
</svg>
34+
</div>
35+
36+
<h1 className="mb-3 text-3xl font-semibold text-gray-900">Oops! Something went wrong</h1>
37+
38+
<p className="text-foreground-muted mb-8 text-lg">
39+
We encountered an error while loading this page. Don't worry, it's not your fault.
40+
</p>
41+
</div>
42+
43+
<div className="space-y-4">
44+
<button
45+
onClick={() => reset()}
46+
className="bg-relisten-600 w-full rounded-lg px-6 py-3 font-medium text-white transition-colors hover:bg-relisten-700 sm:w-auto"
47+
>
48+
Try again
49+
</button>
50+
51+
<div className="flex flex-col justify-center gap-3 sm:flex-row">
52+
<button
53+
onClick={() => window.history.back()}
54+
className="rounded-lg bg-gray-100 px-6 py-3 text-gray-900 transition-colors hover:bg-gray-200"
55+
>
56+
Go back
57+
</button>
58+
59+
<button
60+
onClick={() => (window.location.href = '/')}
61+
className="rounded-lg bg-gray-100 px-6 py-3 text-gray-900 transition-colors hover:bg-gray-200"
62+
>
63+
Go to homepage
64+
</button>
65+
</div>
66+
</div>
67+
68+
{process.env.NODE_ENV === 'development' && (
69+
<details className="mt-8 rounded-lg border border-gray-200 bg-white p-4 text-left">
70+
<summary className="mb-3 cursor-pointer text-sm font-medium text-gray-700 hover:text-gray-900">
71+
🐛 Developer Info
72+
</summary>
73+
<div className="space-y-2">
74+
<div>
75+
<span className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
76+
Error Message:
77+
</span>
78+
<p className="mt-1 rounded bg-red-50 p-2 font-mono text-sm text-red-700">
79+
{error.message}
80+
</p>
81+
</div>
82+
{error.digest && (
83+
<div>
84+
<span className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
85+
Error Digest:
86+
</span>
87+
<p className="mt-1 rounded bg-gray-50 p-2 font-mono text-sm text-gray-700">
88+
{error.digest}
89+
</p>
90+
</div>
91+
)}
92+
{error.stack && (
93+
<div>
94+
<span className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
95+
Stack Trace:
96+
</span>
97+
<pre className="mt-1 max-h-40 overflow-auto rounded bg-gray-50 p-3 text-xs text-gray-700">
98+
{error.stack}
99+
</pre>
100+
</div>
101+
)}
102+
</div>
103+
</details>
104+
)}
105+
</div>
106+
</div>
107+
);
108+
}

‎src/app/not-found.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
'use client';
2+
3+
import { ArrowDown } from 'lucide-react';
14
import Link from 'next/link';
25

36
export default function NotFound() {
@@ -24,7 +27,8 @@ export default function NotFound() {
2427
<h1 className="mb-3 text-3xl font-semibold text-gray-900">404 - Page Not Found</h1>
2528

2629
<p className="text-foreground-muted mb-8 text-lg">
27-
Looks like this show got lost in the lot. The page you're looking for doesn't exist.
30+
Looks like this keyboardist got lost on the way to the show. The Page you're looking for
31+
doesn't exist yet - maybe it's 1983.
2832
</p>
2933
</div>
3034

@@ -33,24 +37,19 @@ export default function NotFound() {
3337
href="/"
3438
className="bg-relisten-600 inline-block w-full rounded-lg px-6 py-3 font-medium text-white transition-colors hover:bg-relisten-700 sm:w-auto"
3539
>
36-
Go to homepage
40+
Go to HomePage
41+
<div className="flex flex-col items-center">
42+
<ArrowDown />
43+
</div>
44+
<img
45+
src="/homepage.jpg"
46+
alt="HomePage"
47+
width={140}
48+
height={225}
49+
sizes="(max-width: 640px) 100vw, 400px"
50+
className="mx-auto"
51+
/>
3752
</Link>
38-
39-
<div className="flex flex-col justify-center gap-3 sm:flex-row">
40-
<button
41-
onClick={() => window.history.back()}
42-
className="rounded-lg bg-gray-100 px-6 py-3 text-gray-900 transition-colors hover:bg-gray-200"
43-
>
44-
Go back
45-
</button>
46-
47-
<Link
48-
href="/artists"
49-
className="rounded-lg bg-gray-100 px-6 py-3 text-gray-900 transition-colors hover:bg-gray-200"
50-
>
51-
Browse artists
52-
</Link>
53-
</div>
5453
</div>
5554
</div>
5655
</div>
@@ -59,4 +58,4 @@ export default function NotFound() {
5958

6059
export const metadata = {
6160
title: '404 - Page Not Found',
62-
};
61+
};

‎src/components/NavBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Link from 'next/link';
22
import Flex from './Flex';
33
import Menu from './Menu';
44
import Player from './Player';
5-
import * as Popover from '@radix-ui/react-popover';
5+
import * as Popover from '@/components/Popover';
66
import RelistenAPI from '@/lib/RelistenAPI';
77
import MainNavHeader from './MainNavHeader';
88
import AndroidUpgradeNotification from './AndroidUpgradeNotification';

‎src/components/Popover.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
'use client';
2+
3+
export * from '@radix-ui/react-popover';

0 commit comments

Comments
 (0)