lfglabs-dev · Jayrodri088 · Mar 9, 2025 · Mar 9, 2025
diff --git a/components/buttons/TimeFilterButton.tsx b/components/buttons/TimeFilterButton.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import styles from '../../styles/TimeFilter.module.css';
+
+const TimeFilter = ({ onFilterChange }) => {
+  const [activeFilter, setActiveFilter] = useState('7D');
+
+  const filters = [
+    { id: '7D', label: '7D' },
+    { id: '1m', label: '1m' },
+    { id: 'Ytd', label: 'Ytd' },
+    { id: 'ALL', label: 'ALL' }
+  ];
+
+  const handleFilterClick = (filterId: React.SetStateAction<string>) => {
+    setActiveFilter(filterId);
+    if (onFilterChange) {
+      onFilterChange(filterId);
+    }
+  };
+
+  return (
+    <div className={styles.filterContainer}>
+      {filters.map((filter) => (
+        <button
+          key={filter.id}
+          className={`${styles.filterButton} ${activeFilter === filter.id ? styles.active : ''}`}
+          onClick={() => handleFilterClick(filter.id)}
+        >
+          {filter.label}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default TimeFilter;
diff --git a/components/cards/SubdomainCard.tsx b/components/cards/SubdomainCard.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import styles from '../../styles/Subdomain.module.css';
+import Tooltip from '@mui/material/Tooltip';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+
+interface SubdomainCardProps {
+  count: number;
+}
+
+const SubdomainCard: React.FC<SubdomainCardProps> = ({ count }) => {
+  return (
+    <div className={styles.card}>
+      <div className={styles.header}>
+        <h2 className={styles.title}>Subdomains</h2>
+        <Tooltip 
+          title="Total number of subdomains registered on Starknet.id" 
+          arrow
+          placement="top"
+        >
+          <InfoOutlinedIcon className={styles.infoIcon} />
+        </Tooltip>
+      </div>
+      <div className={styles.countContainer}>
+        <span className={styles.count}>
+          {count.toLocaleString()}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default SubdomainCard;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@emotion/server": "^11.10.0",
     "@emotion/styled": "^11.10.5",
     "@js-joda/core": "^5.4.2",
+    "@mui/icons-material": "^6.4.7",
     "@mui/material": "^5.11.0",
     "@tanstack/react-query": "^4.20.4",
     "@types/lodash": "^4.14.191",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,6 +7,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import createEmotionCache from "../src/createEmotionCache";
 import { CacheProvider, EmotionCache } from "@emotion/react";
 import { CssBaseline } from "@mui/material";
+import { useRouter } from "next/router";
 
 interface MyAppProps extends AppProps {
   emotionCache?: EmotionCache;
@@ -20,6 +21,10 @@ const App: FC<MyAppProps> = ({
   emotionCache = clientSideEmotionCache,
 }) => {
   const queryClient = new QueryClient();
+  const router = useRouter();
+
+  const noNavbarRoutes = ['/analytics'];
+  const showNavbar = !noNavbarRoutes.includes(router.pathname);
 
   return (
     <CacheProvider value={emotionCache}>
@@ -28,7 +33,7 @@ const App: FC<MyAppProps> = ({
         <Head>
           <title>Dashboard.Starknet.id</title>
         </Head>
-        <Navbar />
+        {showNavbar && <Navbar />}
         <Component className="relative" {...pageProps} />
       </QueryClientProvider>
     </CacheProvider>

diff --git a/pages/analytics/index.tsx b/pages/analytics/index.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from '../../styles/Analytics.module.css';
+import SubdomainCard from '../../components/cards/SubdomainCard';
+import TimeFilter from '../../components/buttons/TimeFilterButton';
+
+const AnalyticsPage = () => {
+    const handleFilterChange = (filter: any) => {
+        console.log('Filter changed to:', filter);
+        // Implement your filter logic here
+      };
+  return (
+    <div className={styles.analyticsWrapper}>
+        <div className={styles.pageContainer}>
+          <div className={styles.statsRow}>
+            <SubdomainCard count={28145} />
+          </div>
+          <TimeFilter onFilterChange={handleFilterChange} />
+        </div>
+    </div>
+  );
+};
+
+export default AnalyticsPage;
diff --git a/public/images/palm-left.png b/public/images/palm-left.png
diff --git a/public/images/palm-right.png b/public/images/palm-right.png
diff --git a/styles/Analytics.module.css b/styles/Analytics.module.css
@@ -0,0 +1,57 @@
+.analyticsWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    z-index: -2;
+    overflow: auto;
+  }
+
+.pageContainer {
+    width: 100%;
+    max-width: 1280px;
+    margin: 20px auto;
+    padding: 24px 10px;
+    background-color: transparent !important;
+    min-height: calc(100vh - 64px); /* Adjust based on your navbar height */
+  }
+
+  .statsRow {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    margin-bottom: 24px;
+  }
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+    .statsRow {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Add background palms effect if needed */
+  .pageContainer::before,
+  .pageContainer::after {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    width: 300px;
+    height: 400px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  .pageContainer::before {
+    left: -20px;
+    background-image: url('/images/palm-left.png'); /* Replace with your actual image path */
+  }
+
+  .pageContainer::after {
+    right: 0;
+    background-image: url('/images/palm-right.png'); /* Replace with your actual image path */
+  }
diff --git a/styles/Subdomain.module.css b/styles/Subdomain.module.css
@@ -0,0 +1,63 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+.card {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 140px;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(140, 137, 137, 1);
+    margin: 0;
+    font-family: "Poppins";
+  }
+
+  .infoIcon {
+    color: #71717a;
+    cursor: pointer;
+    font-size: 18px;
+    opacity: 0.7;
+  }
+
+  .countContainer {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  .count {
+    font-size: 30px;
+    font-weight: 400;
+    color: #333333;
+    font-family: "Quickzap";
+  }
+
+  /* If you need to adjust for specific page layout */
+  @media (max-width: 768px) {
+    .card {
+      padding: 16px;
+      min-height: 120px;
+    }
+
+    .title {
+      font-size: 16px;
+    }
+
+    .count {
+      font-size: 36px;
+    }
+  }
diff --git a/styles/TimeFilter.module.css b/styles/TimeFilter.module.css
@@ -0,0 +1,33 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+.filterContainer {
+    display: flex;
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    width: fit-content;
+    margin: 20px 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  }
+
+  .filterButton {
+    padding: 5px 25px;
+    border: none;
+    background: transparent;
+    font-family: 'Poppins', sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    color: #555;
+  }
+
+  .filterButton.active {
+    background-color: #0B8A5D;
+    color: white;
+    border-radius: 10px;
+  }
+
+  .filterButton:hover:not(.active) {
+    background-color: white;
+  }