Merge pull request #2207 from pyth-network/cprussin/add-table-sorting…

…-and-empty-states

feat(insights): many insights hub improvements

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

@@ -0,0 +1,3 @@
+"use client";
+
+export { Error as default } from "../../../components/Error";

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

@@ -0,0 +1,47 @@
+@use "@pythnetwork/component-library/theme";
+
+.error {
+  @include theme.max-width;
+
+  display: flex;
+  flex-flow: column nowrap;
+  gap: theme.spacing(12);
+  align-items: center;
+  text-align: center;
+  padding: theme.spacing(36) theme.spacing(0);
+
+  .errorIcon {
+    font-size: theme.spacing(20);
+    height: theme.spacing(20);
+    color: theme.color("states", "error", "color");
+  }
+
+  .text {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: theme.spacing(4);
+    align-items: center;
+
+    .header {
+      @include theme.text("5xl", "semibold");
+
+      color: theme.color("heading");
+    }
+
+    .subheader {
+      @include theme.text("xl", "light");
+
+      color: theme.color("heading");
+    }
+
+    .details {
+      @include theme.text("sm", "normal");
+
+      background: theme.color("background", "secondary");
+      border-radius: theme.border-radius("md");
+      padding: theme.spacing(4) theme.spacing(6);
+      color: theme.color("paragraph");
+      margin-top: theme.spacing(2);
+    }
+  }
+}

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

@@ -1,7 +1,10 @@
+import { Warning } from "@phosphor-icons/react/dist/ssr/Warning";
 import { useLogger } from "@pythnetwork/app-logger";
 import { Button } from "@pythnetwork/component-library/Button";
 import { useEffect } from "react";
 
+import styles from "./index.module.scss";
+
 type Props = {
   error: Error & { digest?: string };
   reset?: () => void;
@@ -15,13 +18,18 @@ export const Error = ({ error, reset }: Props) => {
   }, [error, logger]);
 
   return (
-    <div>
-      <h1>Uh oh!</h1>
-      <h2>Something went wrong</h2>
-      <p>
-        Error Details: <strong>{error.digest ?? error.message}</strong>
-      </p>
-      {reset && <Button onPress={reset}>Reset</Button>}
+    <div className={styles.error}>
+      <Warning className={styles.errorIcon} />
+      <div className={styles.text}>
+        <h1 className={styles.header}>Uh oh!</h1>
+        <h2 className={styles.subheader}>Something went wrong</h2>
+        <code className={styles.details}>{error.digest ?? error.message}</code>
+      </div>
+      {reset && (
+        <Button onPress={reset} size="lg">
+          Reset
+        </Button>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,38 @@
+@use "@pythnetwork/component-library/theme";
+
+.noResults {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: theme.spacing(4);
+  align-items: center;
+  text-align: center;
+  padding: theme.spacing(24) 0;
+
+  .searchIcon {
+    display: grid;
+    place-content: center;
+    padding: theme.spacing(4);
+    background: theme.color("background", "card-highlight");
+    font-size: theme.spacing(6);
+    color: theme.color("highlight");
+    border-radius: theme.border-radius("full");
+  }
+
+  .text {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: theme.spacing(2);
+
+    .header {
+      @include theme.text("lg", "medium");
+
+      color: theme.color("heading");
+    }
+
+    .body {
+      @include theme.text("sm", "normal");
+
+      color: theme.color("paragraph");
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
+import { Button } from "@pythnetwork/component-library/Button";
+
+import styles from "./index.module.scss";
+
+type Props = {
+  query: string;
+  onClearSearch?: (() => void) | undefined;
+};
+
+export const NoResults = ({ query, onClearSearch }: Props) => (
+  <div className={styles.noResults}>
+    <div className={styles.searchIcon}>
+      <MagnifyingGlass />
+    </div>
+    <div className={styles.text}>
+      <h3 className={styles.header}>No results found</h3>
+      <p
+        className={styles.body}
+      >{`We couldn't find any results for "${query}".`}</p>
+    </div>
+    {onClearSearch && (
+      <Button variant="outline" size="sm" onPress={onClearSearch}>
+        Clear search
+      </Button>
+    )}
+  </div>
+);

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

@@ -0,0 +1,41 @@
+@use "@pythnetwork/component-library/theme";
+
+.notFound {
+  @include theme.max-width;
+
+  display: flex;
+  flex-flow: column nowrap;
+  gap: theme.spacing(12);
+  align-items: center;
+  text-align: center;
+  padding: theme.spacing(36) theme.spacing(0);
+
+  .searchIcon {
+    display: grid;
+    place-content: center;
+    padding: theme.spacing(8);
+    background: theme.color("button", "disabled", "background");
+    font-size: theme.spacing(12);
+    color: theme.color("button", "disabled", "foreground");
+    border-radius: theme.border-radius("full");
+  }
+
+  .text {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: theme.spacing(4);
+    align-items: center;
+
+    .header {
+      @include theme.text("5xl", "semibold");
+
+      color: theme.color("heading");
+    }
+
+    .subheader {
+      @include theme.text("xl", "light");
+
+      color: theme.color("heading");
+    }
+  }
+}

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

@@ -1,9 +1,21 @@
+import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr/MagnifyingGlass";
 import { Button } from "@pythnetwork/component-library/Button";
 
+import styles from "./index.module.scss";
+
 export const NotFound = () => (
-  <div>
-    <h1>Not Found</h1>
-    <p>{"The page you're looking for isn't here"}</p>
-    <Button href="/">Go Home</Button>
+  <div className={styles.notFound}>
+    <div className={styles.searchIcon}>
+      <MagnifyingGlass />
+    </div>
+    <div className={styles.text}>
+      <h1 className={styles.header}>Not Found</h1>
+      <p className={styles.subheader}>
+        {"The page you're looking for isn't here"}
+      </p>
+    </div>
+    <Button href="/" size="lg">
+      Go Home
+    </Button>
   </div>
 );

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

@@ -8,6 +8,5 @@
 
     color: theme.color("heading");
     font-weight: theme.font-weight("semibold");
-    margin: theme.spacing(6) 0;
   }
 }

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

@@ -0,0 +1,8 @@
+@use "@pythnetwork/component-library/theme";
+
+.chartCard {
+  .chart {
+    background: theme.color("background", "primary");
+    border-radius: theme.border-radius("lg");
+  }
+}

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

@@ -1 +1,11 @@
-export const Chart = () => <h1>Chart</h1>;
+import { Card } from "@pythnetwork/component-library/Card";
+
+import styles from "./chart.module.scss";
+
+export const Chart = () => (
+  <Card title="Chart" className={styles.chartCard}>
+    <div className={styles.chart}>
+      <h1>This is a chart</h1>
+    </div>
+  </Card>
+);

apps/insights/src/components/PriceFeed/layout.module.scss

@@ -4,7 +4,7 @@
   .header {
     @include theme.max-width;
 
-    margin: theme.spacing(6) auto;
+    margin-bottom: theme.spacing(6);
     display: flex;
     flex-flow: column nowrap;
     gap: theme.spacing(6);