Skip to content

Commit 57a2371

Browse files
hussedevhussedev
authored
feat(ui): added NotFoundPage (#35)
* feat: implemented NotFoundPage * chore: release
1 parent 47dd1ea commit 57a2371

17 files changed

+128
-6
lines changed

‎.changeset/pre.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"thick-jobs-try",
2727
"tough-candles-shake",
2828
"violet-bikes-yell",
29-
"warm-insects-call"
29+
"warm-insects-call",
30+
"witty-pots-bow"
3031
]
3132
}

‎.changeset/witty-pots-bow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@gitcoin/ui": patch
3+
---
4+
5+
implemented NotFoundPage

‎packages/config/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/config
22

3+
## 0.0.0-beta.19
4+
35
## 0.0.0-beta.18
46

57
## 0.0.0-beta.17

‎packages/config/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/config",
3-
"version": "0.0.0-beta.18",
3+
"version": "0.0.0-beta.19",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/themes/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/themes
22

3+
## 0.0.0-beta.19
4+
35
## 0.0.0-beta.18
46

57
## 0.0.0-beta.17

‎packages/themes/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/themes",
3-
"version": "0.0.0-beta.18",
3+
"version": "0.0.0-beta.19",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/types/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/types
22

3+
## 0.0.0-beta.19
4+
35
## 0.0.0-beta.18
46

57
## 0.0.0-beta.17

‎packages/types/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/types",
3-
"version": "0.0.0-beta.18",
3+
"version": "0.0.0-beta.19",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/ui/.storybook/preview.ts

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const preview: Preview = {
2626
["Checker", "Retrofunding", "Application", "*"],
2727
"Components",
2828
"Primitives",
29+
"Pages",
2930
"Shadcn",
3031
"*",
3132
],

‎packages/ui/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @gitcoin/ui
22

3+
## 0.0.0-beta.19
4+
5+
### Patch Changes
6+
7+
- implemented NotFoundPage
8+
39
## 0.0.0-beta.18
410

511
### Patch Changes

‎packages/ui/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/ui",
3-
"version": "0.0.0-beta.18",
3+
"version": "0.0.0-beta.19",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

‎packages/ui/src/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,5 @@ export * from "./components/ProgressModal";
3737
export * from "./components/RadioGroupList";
3838
export * from "./components/SideNav";
3939
export * from "./components/Toaster";
40+
41+
export * from "./pages/NotFoundPage";

‎packages/ui/src/pages/NotFoundPage/NotFoundPage.stories.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Meta, StoryObj } from "@storybook/react";
2+
3+
import { NotFoundPage } from "./NotFoundPage";
4+
5+
const CUSTOM_DESCRIPTION =
6+
"Oops! We couldn’t find this voting page. Double-check the round ID/chain ID or reach out to your round admin for the correct link.";
7+
8+
const meta: Meta<typeof NotFoundPage> = {
9+
title: "Pages/NotFoundPage",
10+
component: NotFoundPage,
11+
argTypes: {
12+
description: {
13+
control: "text",
14+
table: {
15+
type: {
16+
summary: "string",
17+
},
18+
},
19+
},
20+
},
21+
} satisfies Meta<typeof NotFoundPage>;
22+
23+
export default meta;
24+
25+
type Story = StoryObj<typeof NotFoundPage>;
26+
27+
export const Default: Story = {};
28+
29+
export const WithCustomDescription: Story = {
30+
args: {
31+
description: CUSTOM_DESCRIPTION,
32+
},
33+
};
34+
35+
export const WithButton: Story = {
36+
args: {
37+
button: {
38+
label: "Go to home",
39+
onClick: () => {
40+
console.log("clicked");
41+
},
42+
},
43+
},
44+
};

‎packages/ui/src/pages/NotFoundPage/NotFoundPage.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { PropsWithChildren } from "react";
2+
3+
import { tv } from "tailwind-variants";
4+
5+
import { Button } from "@/primitives";
6+
7+
const PRE_TITLE = "ERM... THIS IS AWKWARD";
8+
const TITLE = "Page not found";
9+
const DESCRIPTION = "Looks like the page you are looking for has been moved or removed.";
10+
11+
const variants = tv({
12+
slots: {
13+
container: "flex h-screen flex-col items-center justify-center",
14+
content: "flex max-w-[80%] flex-col gap-2 md:max-w-[60%] lg:max-w-[40%]",
15+
preTitle: "font-ui-mono text-xs/[20px] font-medium sm:text-sm/[24px]",
16+
title: "font-ui-sans text-3xl font-semibold sm:text-5xl",
17+
description: "font-ui-sans text-base font-medium sm:text-lg",
18+
},
19+
variants: {
20+
description: {
21+
default: "font-ui-sans text-5xl font-semibold",
22+
},
23+
},
24+
});
25+
26+
export interface NotFoundPageProps extends PropsWithChildren {
27+
description?: string;
28+
button?: {
29+
label: string;
30+
onClick: () => void;
31+
};
32+
}
33+
34+
export const NotFoundPage = ({
35+
description = DESCRIPTION,
36+
button,
37+
children,
38+
}: NotFoundPageProps) => {
39+
const { container, content, preTitle, title, description: descriptionStyle } = variants();
40+
41+
return (
42+
<div className={container()}>
43+
<div className={content()}>
44+
<div className={preTitle()}>{PRE_TITLE}</div>
45+
<div className={title()}>{TITLE}</div>
46+
{description && <div className={descriptionStyle()}>{description}</div>}
47+
{children}
48+
{button && (
49+
<Button className="w-fit" size="lg" onClick={button.onClick} value={button.label} />
50+
)}
51+
</div>
52+
</div>
53+
);
54+
};

‎packages/ui/src/pages/NotFoundPage/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./NotFoundPage";

‎packages/utils/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @gitcoin/utils
22

3+
## 0.0.0-beta.19
4+
35
## 0.0.0-beta.18
46

57
## 0.0.0-beta.17

‎packages/utils/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gitcoin/utils",
3-
"version": "0.0.0-beta.18",
3+
"version": "0.0.0-beta.19",
44
"repository": {
55
"type": "git",
66
"url": "https://github.com/gitcoinco/core",

0 commit comments

Comments
 (0)