Skip to content

Commit 9584885

Browse files
MananTankMananTank
committed
Updated 404 page in dashboard, Add to App router (#5387)
![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/yNOf1svJ8o3zjO7zQouZ/cb7fcb59-0d12-4072-a426-3c9863302d1f.png) <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on creating a new `NotFound` page component and refactoring the existing 404 page to utilize this new component, improving code organization and reusability. ### Detailed summary - Added `NotFoundPage` component in `apps/dashboard/src/components/not-found-page.tsx`. - Created a structured layout for the 404 error message with links. - Refactored the `PageNotFound` component in `apps/dashboard/src/pages/404.tsx` to use the new `NotFoundPage`. - Removed unused imports and components related to the old 404 page design. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent c6310e6 commit 9584885

File tree

3 files changed

+93
-94
lines changed

3 files changed

+93
-94
lines changed

‎apps/dashboard/src/app/not-found.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { NotFoundPage } from "../components/not-found-page";
2+
3+
export default function NotFound() {
4+
return <NotFoundPage />;
5+
}

‎apps/dashboard/src/components/not-found-page.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { TrackedLinkTW } from "@/components/ui/tracked-link";
2+
3+
export function NotFoundPage() {
4+
return (
5+
<div className="overflow-hidden">
6+
<div className="container flex h-full min-h-screen flex-col justify-center">
7+
<div className="flex flex-col items-center">
8+
<div className="z-10 flex size-[90px] items-center justify-center rounded-3xl border bg-background font-semibold text-2xl text-muted-foreground tracking-tight shadow-lg md:size-[100px] md:text-3xl">
9+
404
10+
</div>
11+
12+
<div className="h-8" />
13+
14+
<p className="text-center font-bold text-3xl tracking-tighter md:text-5xl">
15+
<span className="block"> Uh oh. </span>
16+
<span className="block">Looks like web3</span>
17+
<span className="block">can't be found here.</span>
18+
</p>
19+
20+
<div className="h-12" />
21+
22+
<div>
23+
<p className="text-center text-muted-foreground text-xl leading-7">
24+
Try our{" "}
25+
<TrackedLinkTW
26+
category="page-not-found"
27+
label="homepage"
28+
href="/home"
29+
className="text-foreground hover:underline"
30+
>
31+
homepage
32+
</TrackedLinkTW>
33+
,{" "}
34+
<TrackedLinkTW
35+
category="page-not-found"
36+
label="dashboard"
37+
href="/team"
38+
className="text-foreground hover:underline"
39+
>
40+
dashboard
41+
</TrackedLinkTW>{" "}
42+
or{" "}
43+
<TrackedLinkTW
44+
category="page-not-found"
45+
label="portal"
46+
href="https://portal.thirdweb.com"
47+
className="text-foreground hover:underline"
48+
>
49+
developer portal
50+
</TrackedLinkTW>{" "}
51+
instead
52+
</p>
53+
</div>
54+
55+
<Aurora
56+
color="hsl(var(--foreground)/8%)"
57+
pos={{ top: "40%", left: "50%" }}
58+
size={{ width: "100vw", height: "100vh" }}
59+
/>
60+
</div>
61+
</div>
62+
</div>
63+
);
64+
}
65+
66+
type AuroraProps = {
67+
size: { width: string; height: string };
68+
pos: { top: string; left: string };
69+
color: string;
70+
};
71+
72+
const Aurora: React.FC<AuroraProps> = ({ color, pos, size }) => {
73+
return (
74+
<div
75+
className="pointer-events-none absolute"
76+
style={{
77+
top: pos.top,
78+
left: pos.left,
79+
width: size.width,
80+
height: size.height,
81+
transform: "translate(-50%, -50%)",
82+
backgroundImage: `radial-gradient(ellipse at center, ${color}, transparent 60%)`,
83+
}}
84+
/>
85+
);
86+
};

‎apps/dashboard/src/pages/404.tsx‎

Lines changed: 2 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,9 @@
1-
import { useForceDarkTheme } from "@/components/theme-provider";
2-
import { Box, Flex } from "@chakra-ui/react";
3-
import { ChakraNextImage } from "components/Image";
4-
import { Aurora } from "components/homepage/Aurora";
5-
import { HomepageSection } from "components/product-pages/homepage/HomepageSection";
61
import { PageId } from "page-id";
7-
import { Heading, Text, TrackedLink } from "tw-components";
82
import type { ThirdwebNextPage } from "utils/types";
9-
import NotFound from "../../public/assets/landingpage/not-found.png";
3+
import { NotFoundPage } from "../components/not-found-page";
104

115
const PageNotFound: ThirdwebNextPage = () => {
12-
useForceDarkTheme();
13-
return (
14-
<Flex
15-
sx={{
16-
// overwrite the theme colors because the home page is *always* in "dark mode"
17-
"--chakra-colors-heading": "#F2F2F7",
18-
"--chakra-colors-paragraph": "#AEAEB2",
19-
"--chakra-colors-borderColor": "rgba(255,255,255,0.1)",
20-
}}
21-
justify="center"
22-
flexDir="column"
23-
as="main"
24-
bg="#000"
25-
justifyContent="center"
26-
alignItems="center"
27-
h="100vh"
28-
overflow="hidden"
29-
>
30-
<HomepageSection>
31-
<Aurora
32-
pos={{ left: "50%", top: "50%" }}
33-
size={{ width: "2400px", height: "2400px" }}
34-
color="hsl(289deg 78% 30% / 35%)"
35-
/>
36-
37-
<div className="mb-6 flex items-center justify-center">
38-
<div className="relative mb-6 flex items-center justify-center p-2">
39-
<Box
40-
position="absolute"
41-
bgGradient="linear(to-r, #F213A4, #040BBF)"
42-
top={0}
43-
left={0}
44-
bottom={0}
45-
right={0}
46-
borderRadius="3xl"
47-
overflow="visible"
48-
filter="blur(15px)"
49-
/>
50-
51-
<ChakraNextImage
52-
alt=""
53-
boxSize={{ base: 24, md: 32 }}
54-
placeholder="empty"
55-
src={NotFound}
56-
/>
57-
</div>
58-
</div>
59-
<Heading textAlign="center" size="display.md">
60-
Uh oh.
61-
<br />
62-
Looks like web3
63-
<br />
64-
can&apos;t be found here.
65-
</Heading>
66-
<Text size="body.2xl" textAlign="center" mt={3}>
67-
Try our{" "}
68-
<TrackedLink
69-
category="page-not-found"
70-
label="homepage"
71-
href="/"
72-
color="blue.500"
73-
>
74-
homepage
75-
</TrackedLink>
76-
,{" "}
77-
<TrackedLink
78-
category="page-not-found"
79-
label="homepage"
80-
href="/team"
81-
color="blue.500"
82-
>
83-
dashboard
84-
</TrackedLink>{" "}
85-
or{" "}
86-
<TrackedLink
87-
category="page-not-found"
88-
label="portal"
89-
href="https://portal.thirdweb.com"
90-
color="blue.500"
91-
>
92-
developer portal
93-
</TrackedLink>{" "}
94-
instead.
95-
</Text>
96-
</HomepageSection>
97-
</Flex>
98-
);
6+
return <NotFoundPage />;
997
};
1008

1019
PageNotFound.pageId = PageId.PageNotFound;

0 commit comments

Comments
 (0)