From 4db5f1d29a47ec9a6ff3821621b30efc893a412c Mon Sep 17 00:00:00 2001
From: Jacob Homanics <homanicsjake@gmail.com>
Date: Thu, 1 Feb 2024 03:50:28 -0600
Subject: [PATCH] added nav bar component

---
 .../_components/NavBarCardConfig.tsx          | 59 ++++++++++++++++++-
 .../_components/RepTokensDemo.tsx             | 23 ++++++++
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx
index 9beef1a..ee848aa 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx
@@ -1,6 +1,5 @@
 // import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard";
 // import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
-
 // export const tokensCardPropertiesClasses = {
 //   container: "flex justify-center",
 //   card: "bg-slate-800 flex flex-col items-center",
@@ -9,7 +8,6 @@
 //     value: "ml-1.5 text-${size} font-normal text-white",
 //   },
 // } as TokenGroupCardElementsClasses;
-
 // export const tokenCardPropertiesClasses = {
 //   card: "px-1 py-1 relative w-20 ",
 //   baseTokenCardElementsClasses: {
@@ -22,3 +20,60 @@
 //     },
 //   },
 // } as TokenCardClasses;
+import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import {
+  ImageValueCardConfigProp,
+  TokenCardConfigProps,
+  TokenCardValuesConfigProps,
+  ValueCardConfigProps,
+} from "../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/Types";
+
+export const balanceProps = {
+  isRendering: true,
+  classes: {
+    card: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
+    value: "text-4xl mx-auto text-center text-black",
+  },
+  isPrettyLoading: true,
+} as ValueCardConfigProps;
+
+export const imageProps = {
+  isRendering: true,
+  classes: {
+    card: "bg-slate-300 p-1",
+    value: "rounded mx-auto",
+  },
+  imageProperties: new ImageProps("Token", 256, 256),
+  isPrettyLoading: true,
+} as ImageValueCardConfigProp;
+
+export const tokenCardValuesProps = {
+  balanceProps,
+  imageProps,
+} as TokenCardValuesConfigProps;
+
+export const tokenCardProps = {
+  isRendering: true,
+  cardClasses: "bg-slate-600 px-1 py-1 relative w-20 ",
+  valuesProps: tokenCardValuesProps,
+} as TokenCardConfigProps;
+
+export const tokenGroupCardConfigProps = {
+  isRendering: true,
+  cardClasses: {
+    card: "bg-slate-900 flex flex-col items-center p-5",
+    value: "bg-slate-800 flex justify-center p-5",
+  },
+  address: {
+    isRendering: true,
+    classes: {
+      card: "my-5 flex items-center justify-center bg-slate-300",
+      value: "ml-1.5 text-base font-normal text-cyan-800",
+    },
+    isPrettyLoading: true,
+  } as ValueCardConfigProps,
+
+  isPrettyLoading: true,
+  tokenCardProps,
+} as TokenGroupCardConfigProps;
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index 2fb9107..a923584 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -3,6 +3,7 @@
 import { useAccount } from "wagmi";
 import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig";
 import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig";
+import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/NavBarCardConfig";
 import { TokenGroupCard } from "~~/components/rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "~~/components/rep-tokens/hooks/Hooks";
 import { buildTokenCards, buildTokenGroupCard } from "~~/components/rep-tokens/utils/buildTokensCard";
@@ -45,6 +46,22 @@ export function RepTokensDemo() {
   if (mainTokenGroupOverlayCardConfigProps.address?.isRendering) {
     mainTokenGroupOverlayCardProps.addressOutput = <Address props={mainTokenGroupOverlayCardProps.addressProps} />;
   }
+
+  const navBarTokenCards = buildTokenCards(
+    tokensData.tokens,
+    tokensData.address,
+    navBarTokenGroupConfigProps.tokenCardProps,
+  );
+  const navBarTokenGroupCardProps = buildTokenGroupCard(
+    navBarTokenGroupConfigProps,
+    navBarTokenCards,
+    tokensData.address,
+  );
+
+  if (navBarTokenGroupConfigProps.address?.isRendering) {
+    navBarTokenGroupCardProps.addressOutput = <Address props={navBarTokenGroupCardProps.addressProps} />;
+  }
+
   return (
     <>
       {/* <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
@@ -58,6 +75,12 @@ export function RepTokensDemo() {
         </div>
       </div> */}
 
+      <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
+        <div>
+          <TokenGroupCard props={navBarTokenGroupCardProps} />
+        </div>
+      </div>
+
       <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
         <div>
           <TokenGroupCard props={mainTokenGroupCardProps} />