Skip to content

Commit d12445d

Browse files
cprussincprussin
committed
feat(insights): many insights hub improvements
- Add column sorting to tables - Add empty states to searchable tables - Improve error & not found pages - Fix jumpy page transition animations
1 parent 57670ca commit d12445d

26 files changed

+667
-182
lines changed

‎apps/insights/src/app/price-feeds/[slug]/error.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
"use client";
2+
3+
export { Error as default } from "../../../components/Error";

‎apps/insights/src/components/Error/index.module.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.error {
4+
@include theme.max-width;
5+
6+
display: flex;
7+
flex-flow: column nowrap;
8+
gap: theme.spacing(12);
9+
align-items: center;
10+
text-align: center;
11+
padding: theme.spacing(36) theme.spacing(0);
12+
13+
.errorIcon {
14+
font-size: theme.spacing(20);
15+
height: theme.spacing(20);
16+
color: theme.color("states", "error", "color");
17+
}
18+
19+
.text {
20+
display: flex;
21+
flex-flow: column nowrap;
22+
gap: theme.spacing(4);
23+
align-items: center;
24+
25+
.header {
26+
@include theme.text("5xl", "semibold");
27+
28+
color: theme.color("heading");
29+
}
30+
31+
.subheader {
32+
@include theme.text("xl", "light");
33+
34+
color: theme.color("heading");
35+
}
36+
37+
.details {
38+
@include theme.text("sm", "normal");
39+
40+
background: theme.color("background", "secondary");
41+
border-radius: theme.border-radius("md");
42+
padding: theme.spacing(4) theme.spacing(6);
43+
color: theme.color("paragraph");
44+
margin-top: theme.spacing(2);
45+
}
46+
}
47+
}

‎apps/insights/src/components/Error/index.tsx

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import { Warning } from "@phosphor-icons/react/dist/ssr/Warning";
12
import { useLogger } from "@pythnetwork/app-logger";
23
import { Button } from "@pythnetwork/component-library/Button";
34
import { useEffect } from "react";
45

6+
import styles from "./index.module.scss";
7+
58
type Props = {
69
error: Error & { digest?: string };
710
reset?: () => void;
@@ -15,13 +18,18 @@ export const Error = ({ error, reset }: Props) => {
1518
}, [error, logger]);
1619

1720
return (
18-
<div>
19-
<h1>Uh oh!</h1>
20-
<h2>Something went wrong</h2>
21-
<p>
22-
Error Details: <strong>{error.digest ?? error.message}</strong>
23-
</p>
24-
{reset && <Button onPress={reset}>Reset</Button>}
21+
<div className={styles.error}>
22+
<Warning className={styles.errorIcon} />
23+
<div className={styles.text}>
24+
<h1 className={styles.header}>Uh oh!</h1>
25+
<h2 className={styles.subheader}>Something went wrong</h2>
26+
<code className={styles.details}>{error.digest ?? error.message}</code>
27+
</div>
28+
{reset && (
29+
<Button onPress={reset} size="lg">
30+
Reset
31+
</Button>
32+
)}
2533
</div>
2634
);
2735
};

‎apps/insights/src/components/NoResults/index.module.scss

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.noResults {
4+
display: flex;
5+
flex-flow: column nowrap;
6+
gap: theme.spacing(4);
7+
align-items: center;
8+
text-align: center;
9+
padding: theme.spacing(24) 0;
10+
11+
.searchIcon {
12+
display: grid;
13+
place-content: center;
14+
padding: theme.spacing(4);
15+
background: theme.color("background", "card-highlight");
16+
font-size: theme.spacing(6);
17+
color: theme.color("highlight");
18+
border-radius: theme.border-radius("full");
19+
}
20+
21+
.text {
22+
display: flex;
23+
flex-flow: column nowrap;
24+
gap: theme.spacing(2);
25+
26+
.header {
27+
@include theme.text("lg", "medium");
28+
29+
color: theme.color("heading");
30+
}
31+
32+
.body {
33+
@include theme.text("sm", "normal");
34+
35+
color: theme.color("paragraph");
36+
}
37+
}
38+
}

‎apps/insights/src/components/NoResults/index.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
2+
import { Button } from "@pythnetwork/component-library/Button";
3+
4+
import styles from "./index.module.scss";
5+
6+
type Props = {
7+
query: string;
8+
onClearSearch?: (() => void) | undefined;
9+
};
10+
11+
export const NoResults = ({ query, onClearSearch }: Props) => (
12+
<div className={styles.noResults}>
13+
<div className={styles.searchIcon}>
14+
<MagnifyingGlass />
15+
</div>
16+
<div className={styles.text}>
17+
<h3 className={styles.header}>No results found</h3>
18+
<p
19+
className={styles.body}
20+
>{`We couldn't find any results for "${query}".`}</p>
21+
</div>
22+
{onClearSearch && (
23+
<Button variant="outline" size="sm" onPress={onClearSearch}>
24+
Clear search
25+
</Button>
26+
)}
27+
</div>
28+
);

‎apps/insights/src/components/NotFound/index.module.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.notFound {
4+
@include theme.max-width;
5+
6+
display: flex;
7+
flex-flow: column nowrap;
8+
gap: theme.spacing(12);
9+
align-items: center;
10+
text-align: center;
11+
padding: theme.spacing(36) theme.spacing(0);
12+
13+
.searchIcon {
14+
display: grid;
15+
place-content: center;
16+
padding: theme.spacing(8);
17+
background: theme.color("button", "disabled", "background");
18+
font-size: theme.spacing(12);
19+
color: theme.color("button", "disabled", "foreground");
20+
border-radius: theme.border-radius("full");
21+
}
22+
23+
.text {
24+
display: flex;
25+
flex-flow: column nowrap;
26+
gap: theme.spacing(4);
27+
align-items: center;
28+
29+
.header {
30+
@include theme.text("5xl", "semibold");
31+
32+
color: theme.color("heading");
33+
}
34+
35+
.subheader {
36+
@include theme.text("xl", "light");
37+
38+
color: theme.color("heading");
39+
}
40+
}
41+
}

‎apps/insights/src/components/NotFound/index.tsx

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
1+
import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
12
import { Button } from "@pythnetwork/component-library/Button";
23

4+
import styles from "./index.module.scss";
5+
36
export const NotFound = () => (
4-
<div>
5-
<h1>Not Found</h1>
6-
<p>{"The page you're looking for isn't here"}</p>
7-
<Button href="/">Go Home</Button>
7+
<div className={styles.notFound}>
8+
<div className={styles.searchIcon}>
9+
<MagnifyingGlass />
10+
</div>
11+
<div className={styles.text}>
12+
<h1 className={styles.header}>Not Found</h1>
13+
<p className={styles.subheader}>
14+
{"The page you're looking for isn't here"}
15+
</p>
16+
</div>
17+
<Button href="/" size="lg">
18+
Go Home
19+
</Button>
820
</div>
921
);

‎apps/insights/src/components/Overview/index.module.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,5 @@
88

99
color: theme.color("heading");
1010
font-weight: theme.font-weight("semibold");
11-
margin: theme.spacing(6) 0;
1211
}
1312
}

‎apps/insights/src/components/PriceFeed/chart.module.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@use "@pythnetwork/component-library/theme";
2+
3+
.chartCard {
4+
.chart {
5+
background: theme.color("background", "primary");
6+
border-radius: theme.border-radius("lg");
7+
}
8+
}

‎apps/insights/src/components/PriceFeed/chart.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
export const Chart = () => <h1>Chart</h1>;
1+
import { Card } from "@pythnetwork/component-library/Card";
2+
3+
import styles from "./chart.module.scss";
4+
5+
export const Chart = () => (
6+
<Card title="Chart" className={styles.chartCard}>
7+
<div className={styles.chart}>
8+
<h1>This is a chart</h1>
9+
</div>
10+
</Card>
11+
);

0 commit comments

Comments
 (0)