tangle-network · AtelyPham · Aug 2, 2023 · Jul 31, 2023 · Jul 31, 2023 · Jul 31, 2023
@@ -1,16 +1,16 @@
-'use client';
-import {
-  WebbUIProvider,
-  Footer,
-  SideBar,
-  Logo,
-  LogoWithoutName,
-} from '@webb-tools/webb-ui-components';
+import { Metadata } from 'next';
+import { WebbUIProvider, Footer } from '@webb-tools/webb-ui-components';
 import '@webb-tools/webb-ui-components/tailwind.css';
-import { WEBB_MKT_URL } from '@webb-tools/webb-ui-components/constants';
-import { Header } from '../components';
-import '@webb-tools/webb-ui-components/tailwind.css';
-import { sideBarProps } from '../constants';
+
+import { Layout } from '../containers';
+
+export const metadata: Metadata = {
+  title: 'Hubble Stats',
+  description: 'Welcome to Hubble Stats!',
+  icons: {
+    icon: '/favicon.png',
+  },
+};
 
 export default function RootLayout({
   children,
@@ -20,14 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <WebbUIProvider defaultThemeMode="light">
-        <body className="h-screen bg-body dark:bg-body_dark bg-cover flex">
-          <SideBar {...sideBarProps} className="hidden lg:block" />
-          <main className="flex-1 px-3 md:px-5 lg:px-10 overflow-y-auto">
-            <Header tvlValue="$13,642,124" volumeValue="$8,562,122" />
-            {children}
-            <Footer isMinimal className="max-w-none" />
-          </main>
-        </body>
+        <Layout>{children}</Layout>
       </WebbUIProvider>
     </html>
   );

@@ -1,15 +1,9 @@
-import { Metadata } from 'next';
 import {
   KeyMetricsTableContainer,
   ShieldedTablesContainer,
   OverviewChartsContainer,
 } from '../containers';
 
-export const metadata: Metadata = {
-  title: 'Hubble Stats',
-  description: 'Welcome to Hubble Stats!',
-};
-
 export default async function Index() {
   return (
     <div className="py-4 space-y-6">

@@ -1,3 +1,5 @@
+'use client';
+
 import { FC } from 'react';
 import {
   ResponsiveContainer,
@@ -6,16 +8,19 @@ import {
   Tooltip,
   XAxis,
 } from 'recharts';
+import { useDarkMode } from '@webb-tools/webb-ui-components';
+
 import { AreaChartProps } from './types';
 
 const AreaChart: FC<AreaChartProps> = ({
   data,
   setDate,
   setValue,
-  isDarkMode,
   width = '100%',
   height = 180,
 }) => {
+  const [isDarkMode] = useDarkMode();
+
   return (
     <ResponsiveContainer width={width} height={height}>
       <AreaChartCmp

@@ -1,8 +1,10 @@
 export type AreaChartProps = {
-  data: any;
+  data: Array<{
+    date: Date;
+    value: number;
+  }>;
   setValue: (value: number | null) => void;
   setDate: (date: Date | null) => void;
-  isDarkMode: boolean;
   width?: number | string;
   height?: number | string;
 };
@@ -1,3 +1,5 @@
+'use client';
+
 import { FC } from 'react';
 import {
   ResponsiveContainer,
@@ -6,16 +8,19 @@ import {
   Tooltip,
   Bar,
 } from 'recharts';
+import { useDarkMode } from '@webb-tools/webb-ui-components';
+
 import { BarChartProps } from './types';
 
 const BarChart: FC<BarChartProps> = ({
   data,
   setValue,
   setDate,
-  isDarkMode,
   width = '100%',
   height = 180,
 }) => {
+  const [isDarkMode] = useDarkMode();
+
   return (
     <ResponsiveContainer width={width} height={height}>
       <BarChartCmp

@@ -1,8 +1,10 @@
 export type BarChartProps = {
-  data: any;
+  data: Array<{
+    date: Date;
+    value: number;
+  }>;
   setValue: (value: number | null) => void;
   setDate: (date: Date | null) => void;
-  isDarkMode: boolean;
   width?: number | string;
   height?: number | string;
 };
@@ -0,0 +1,61 @@
+'use client';
+
+import { FC, useMemo } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  Breadcrumbs as BreadcrumbsCmp,
+  BreadcrumbsItem,
+} from '@webb-tools/webb-ui-components';
+import { CoinIcon, ContrastLine } from '@webb-tools/icons';
+
+import { BreadcrumbType } from './types';
+
+const Breadcrumbs: FC = () => {
+  const pathname = usePathname();
+
+  const breadCrumbs = useMemo(() => {
+    const parts = pathname.split('/');
+    const activeItem = parts[parts.length - 1];
+
+    const breadCrumbItems: BreadcrumbType[] = [
+      {
+        label: 'Hubble Overview',
+        isLast: activeItem !== '' ? false : true,
+        icon: (
+          <ContrastLine className={activeItem !== '' ? 'fill-mono-120' : ''} />
+        ),
+        href: '/',
+      },
+    ];
+
+    if (activeItem !== '') {
+      breadCrumbItems.push({
+        label: activeItem,
+        isLast: true,
+        icon: <CoinIcon />,
+        href: '',
+      });
+    }
+
+    return breadCrumbItems;
+  }, [pathname]);
+
+  return (
+    <BreadcrumbsCmp>
+      {breadCrumbs.map((breadcrumb, index) => (
+        <Link key={index} href={breadcrumb.href}>
+          <BreadcrumbsItem
+            icon={breadcrumb.icon}
+            className={breadcrumb.className}
+            isLast={breadcrumb.isLast}
+          >
+            {breadcrumb.label}
+          </BreadcrumbsItem>
+        </Link>
+      ))}
+    </BreadcrumbsCmp>
+  );
+};
+
+export default Breadcrumbs;
@@ -0,0 +1 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
@@ -0,0 +1,7 @@
+export type BreadcrumbType = {
+  label: string;
+  isLast: boolean;
+  icon: JSX.Element;
+  href: string;
+  className?: string;
+};
@@ -14,7 +14,7 @@ const KeyMetricItem: FC<MetricItemProps> = ({
   return (
     <div
       className={cx(
-        'table-cell px-4 py-2 space-y-2 w-1/4',
+        'w-1/4 table-cell px-4 py-2 space-y-2',
         'border-x border-mono-40 dark:border-mono-160',
         'first-of-type:border-l-0 last-of-type:border-r-0'
       )}

@@ -1,3 +1,5 @@
+'use client';
+
 import { FC, useMemo } from 'react';
 import {
   createColumnHelper,

@@ -1,3 +1,5 @@
+'use client';
+
 import { FC, useMemo } from 'react';
 import cx from 'classnames';
 import {

@@ -1,3 +1,5 @@
+'use client';
+
 import { FC } from 'react';
 import {
   createColumnHelper,