chore(stats): refactor Stats component to accept children and integrate with Overview and PriceFeeds for better flexibility

Author: partyparrotgreg

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

@@ -1,9 +1,7 @@
 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

@@ -49,8 +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}>
+        <Stats>
           <StatCard
             variant="primary"
             header="Active Feeds"
@@ -76,7 +75,7 @@ export const PriceFeeds = async () => {
               corner={<Info weight="fill" />}
             />
           </AssetClassesDrawer>
-        </section>
+        </Stats>
         <YesterdaysPricesProvider
           feeds={Object.fromEntries(
             featuredRecentlyAdded.map(({ symbol, product }) => [
@@ -167,6 +166,7 @@ const FeaturedFeedsCard = <T extends ElementType>({
 }: FeaturedFeedsCardProps<T>) => (
   <Card {...props}>
     <div className={styles.featuredFeeds}>
+      <Stats>
       {feeds.map((feed) => (
         <Card
           key={feed.product.price_account}
@@ -193,6 +193,7 @@ const FeaturedFeedsCard = <T extends ElementType>({
           </div>
         </Card>
       ))}
+      </Stats>
     </div>
   </Card>
 );

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

@@ -27,7 +27,7 @@
 }
 
 .statsContainer {
-    gap: theme.spacing(6);
+    gap: theme.spacing(2);
     width: 100%;
     display: flex;
     flex-direction: row;

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

@@ -1,37 +1,15 @@
-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 = () => {
+export const Stats = ({
+    children
+}: {
+    children: React.ReactNode
+}) => {
     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 />}
-                />
+                {children}
             </div>
         </div>
     )

packages/component-library/src/Card/index.module.scss

@@ -16,6 +16,7 @@
   position: relative;
   padding: theme.spacing(1);
   isolation: isolate;
+  overflow: hidden;
 
   @at-root button#{&} {
     cursor: pointer;