chore(overview, priceFeeds): add Stats component for quick insights display on Overview and Price Feeds pages

Author: partyparrotgreg

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

@@ -1,7 +1,9 @@
 import styles from "./index.module.scss";
+import { Stats } from "../Stats";
 
 export const Overview = () => (
   <div className={styles.overview}>
     <h1 className={styles.header}>Overview</h1>
+    <Stats />
   </div>
 );

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

@@ -23,6 +23,7 @@ import { YesterdaysPricesProvider, ChangePercent } from "../ChangePercent";
 import { LivePrice } from "../LivePrices";
 import { PriceFeedIcon } from "../PriceFeedIcon";
 import { PriceFeedTag } from "../PriceFeedTag";
+import { Stats } from "../Stats";
 
 const PRICE_FEEDS_ANCHOR = "priceFeeds";
 
@@ -48,6 +49,7 @@ export const PriceFeeds = async () => {
     <div className={styles.priceFeeds}>
       <h1 className={styles.header}>Price Feeds</h1>
       <div className={styles.body}>
+        <Stats />
         <section className={styles.stats}>
           <StatCard
             variant="primary"

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

@@ -0,0 +1,58 @@
+@use "@pythnetwork/component-library/theme";
+
+.statWrapper {
+    position: relative;
+    width: 100%;
+    display: flex;
+
+    @include theme.mobile {
+        width: 100dvw; // Extend the width beyond the root padding
+        margin-left: -#{theme.spacing(4)};
+        margin-right: -#{theme.spacing(4)};
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x mandatory;
+        scroll-padding: theme.spacing(4);
+        left: 0;
+        right: 0;
+
+        // Optional: Hide scrollbars
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+}
+
+.statsContainer {
+    gap: theme.spacing(6);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    > * {
+        display: flex;
+        width: 100%;
+        flex-grow: 1;
+        flex-shrink: 0;
+        flex-basis: 0;
+        min-width: 0;
+        max-width: 100%;
+        min-height: 0;
+    }
+
+    @include theme.mobile {
+        width: max-content;
+        gap: theme.spacing(3);
+        padding: 0 theme.spacing(4);
+        > * {
+            width: 280px;
+            scroll-snap-align: start;
+        }
+    }
+}

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

@@ -0,0 +1,38 @@
+import { ArrowLineDown } from "@phosphor-icons/react/dist/ssr/ArrowLineDown"
+import { StatCard } from "@pythnetwork/component-library/StatCard"
+
+import styles from "./index.module.scss"
+
+export const Stats = () => {
+    return (
+        <div className={styles.statWrapper}>
+            <div className={styles.statsContainer}>
+                <StatCard
+                    variant="primary"
+                    header="Active Feeds"
+                    stat={7}
+                    href={'/price-feeds'}
+                    corner={<ArrowLineDown />}
+                />
+                <StatCard
+                    header="Active Feeds"
+                    stat={7}
+                    href={'/price-feeds'}
+                    corner={<ArrowLineDown />}
+                />
+                <StatCard
+                    header="Active Feeds"
+                    stat={7}
+                    href={'/price-feeds'}
+                    corner={<ArrowLineDown />}
+                />
+                <StatCard
+                    header="Active Feeds"
+                    stat={7}
+                    href={'/price-feeds'}
+                    corner={<ArrowLineDown />}
+                />
+            </div>
+        </div>
+    )
+}