rounded props

ATXDAO · Feb 1, 2024 · 9038c8d · 9038c8d
1 parent 4db5f1d
commit 9038c8d
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 138 deletions.
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx
@@ -10,7 +10,7 @@ import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/
 export const balanceProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300",
+    card: "rounded-lg bg-slate-300",
     value: "text-4xl mx-auto text-center text-black",
   },
   isPrettyLoading: true,
@@ -19,8 +19,8 @@ export const balanceProps = {
 export const imageProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300 p-1",
-    value: "rounded mx-auto",
+    card: "rounded-lg bg-slate-300 p-1",
+    value: "rounded-lg mx-auto",
   },
   imageProperties: new ImageProps("Token", 256, 256),
   isPrettyLoading: true,
@@ -29,7 +29,7 @@ export const imageProps = {
 export const nameProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300",
+    card: "rounded-lg bg-slate-300",
     value: "text-1xl text-center object-center mx-auto font-bold break-all text-black",
   },
   isPrettyLoading: true,
@@ -38,7 +38,7 @@ export const nameProps = {
 export const descriptionProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300",
+    card: "rounded-lg bg-slate-300",
     value: "text-1xl mx-auto text-center break-words text-black",
   },
   isPrettyLoading: true,
@@ -47,8 +47,8 @@ export const descriptionProps = {
 export const addressProps = {
   isRendering: true,
   classes: {
-    card: "flex items-center justify-center bg-slate-300",
-    value: "ml-1.5 text-base font-normal text-cyan-800",
+    card: "rounded-lg flex items-center justify-center bg-slate-300",
+    value: " ml-1.5 text-base font-normal text-cyan-800",
   },
   isPrettyLoading: true,
 } as ValueCardConfigProps;
@@ -61,27 +61,27 @@ export const tokenCardValuesProps = {
   addressProps,
 } as TokenCardValuesConfigProps;
 
-export const tokenCardProps = {
+export const tokenCardConfigProps = {
   isRendering: true,
-  cardClasses: "bg-slate-600 p-5 m-4 w-64",
+  cardClasses: "rounded-lg bg-slate-600 p-5 m-4 w-64",
   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",
+    card: "rounded-lg bg-slate-900 flex flex-col items-center p-5",
+    value: "rounded-lg 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",
+      card: "rounded-lg my-5 flex items-center justify-center bg-slate-300",
+      value: "rounded-lg ml-1.5 text-base font-normal text-cyan-800",
     },
     isPrettyLoading: true,
   } as ValueCardConfigProps,
 
   isPrettyLoading: true,
-  tokenCardProps,
+  tokenCardConfigProps,
 } as TokenGroupCardConfigProps;
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx
@@ -1,27 +1,3 @@
-// import { TokenCardClasses } from "../rep-tokens/cards/token-card/TokenCard";
-// import { TokenGroupCardElementsClasses } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
-// export const tokensCardPropertiesClasses = {
-//   card: "bg-base-300 flex flex-col items-center",
-//   container: "flex justify-center",
-// } as TokenGroupCardElementsClasses;
-// export const tokenCardPropertiesClasses = {
-//   card: "px-5 py-5 relative w-64",
-//   baseTokenCardElementsClasses: {
-//     balance: {
-//       container: "absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/3",
-//       value: "text-9xl mx-auto text-center",
-//     },
-//     name: {
-//       value: "text-1xl text-center object-center mx-auto font-bold break-all",
-//     },
-//     description: {
-//       value: "text-1xl mx-auto text-center break-words",
-//     },
-//     image: {
-//       value: "rounded mx-auto",
-//     },
-//   },
-// } as TokenCardClasses;
 import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
@@ -43,8 +19,8 @@ export const balanceProps = {
 export const imageProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300 p-1",
-    value: "rounded mx-auto",
+    card: "rounded-lg bg-slate-300 p-1",
+    value: "rounded-lg mx-auto",
   },
   imageProperties: new ImageProps("Token", 256, 256),
   isPrettyLoading: true,
@@ -53,7 +29,7 @@ export const imageProps = {
 export const nameProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300",
+    card: "rounded-lg bg-slate-300",
     value: "text-1xl text-center object-center mx-auto font-bold break-all text-black",
   },
   isPrettyLoading: true,
@@ -62,7 +38,7 @@ export const nameProps = {
 export const descriptionProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300",
+    card: "rounded-lg bg-slate-300",
     value: "text-1xl mx-auto text-center break-words text-black",
   },
   isPrettyLoading: true,
@@ -71,7 +47,7 @@ export const descriptionProps = {
 export const addressProps = {
   isRendering: true,
   classes: {
-    card: "flex items-center justify-center bg-slate-300",
+    card: "rounded-lg flex items-center justify-center bg-slate-300",
     value: "ml-1.5 text-base font-normal text-cyan-800",
   },
   isPrettyLoading: true,
@@ -85,27 +61,27 @@ export const tokenCardValuesProps = {
   addressProps,
 } as TokenCardValuesConfigProps;
 
-export const tokenCardProps = {
+export const tokenCardConfigProps = {
   isRendering: true,
-  cardClasses: "bg-slate-600 p-5 m-4 relative w-64",
+  cardClasses: "rounded-lg bg-slate-600 p-5 m-4 relative w-64",
   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",
+    card: "rounded-lg bg-slate-900 flex flex-col items-center p-5",
+    value: "rounded-lg bg-slate-800 flex justify-center p-5",
   },
   address: {
     isRendering: true,
     classes: {
-      card: "my-5 flex items-center justify-center bg-slate-300",
+      card: "rounded-lg 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,
+  tokenCardConfigProps,
 } as TokenGroupCardConfigProps;
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx
@@ -1,25 +1,3 @@
-// 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",
-//   address: {
-//     container: "flex items-center justify-center bg-slate-600",
-//     value: "ml-1.5 text-${size} font-normal text-white",
-//   },
-// } as TokenGroupCardElementsClasses;
-// export const tokenCardPropertiesClasses = {
-//   card: "px-1 py-1 relative w-20 ",
-//   baseTokenCardElementsClasses: {
-//     balance: {
-//       container: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
-//       value: "text-4xl text-center justify-center",
-//     },
-//     image: {
-//       value: "rounded mx-auto",
-//     },
-//   },
-// } as TokenCardClasses;
 import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
@@ -32,7 +10,7 @@ import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/
 export const balanceProps = {
   isRendering: true,
   classes: {
-    card: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",
+    card: "rounded-lg 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,
@@ -41,7 +19,7 @@ export const balanceProps = {
 export const imageProps = {
   isRendering: true,
   classes: {
-    card: "bg-slate-300 p-1",
+    card: "rounded-lg bg-slate-300 p-1",
     value: "rounded mx-auto",
   },
   imageProperties: new ImageProps("Token", 256, 256),
@@ -53,27 +31,27 @@ export const tokenCardValuesProps = {
   imageProps,
 } as TokenCardValuesConfigProps;
 
-export const tokenCardProps = {
+export const tokenCardConfigProps = {
   isRendering: true,
-  cardClasses: "bg-slate-600 px-1 py-1 relative w-20 ",
+  cardClasses: "rounded-lg 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",
+    card: "rounded-lg bg-slate-900 flex flex-col items-center p-5",
+    value: "rounded-lg bg-slate-800 flex justify-center p-5",
   },
   address: {
     isRendering: true,
     classes: {
-      card: "my-5 flex items-center justify-center bg-slate-300",
+      card: "rounded-lg 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,
+  tokenCardConfigProps,
 } as TokenGroupCardConfigProps;
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -1,12 +1,16 @@
 "use client";
 
 import { useAccount } from "wagmi";
-import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig";
+import {
+  tokenGroupCardConfigProps as mainTokenGroupCardConfigProps,
+  tokenCardConfigProps,
+} 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 { TokenCard } from "~~/components/rep-tokens/cards/token-card/TokenCard";
 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";
+import { buildTokenCard, buildTokenCards, buildTokenGroupCard } from "~~/components/rep-tokens/utils/buildTokensCard";
 import { Address } from "~~/components/scaffold-eth";
 
 export function RepTokensDemo() {
@@ -20,7 +24,7 @@ export function RepTokensDemo() {
   const mainTokenCards = buildTokenCards(
     tokensData.tokens,
     tokensData.address,
-    mainTokenGroupCardConfigProps.tokenCardProps,
+    mainTokenGroupCardConfigProps.tokenCardConfigProps,
   );
   const mainTokenGroupCardProps = buildTokenGroupCard(
     mainTokenGroupCardConfigProps,
@@ -35,7 +39,7 @@ export function RepTokensDemo() {
   const mainTokensOverlayCards = buildTokenCards(
     tokensData.tokens,
     tokensData.address,
-    mainTokenGroupOverlayCardConfigProps.tokenCardProps,
+    mainTokenGroupOverlayCardConfigProps.tokenCardConfigProps,
   );
   const mainTokenGroupOverlayCardProps = buildTokenGroupCard(
     mainTokenGroupOverlayCardConfigProps,
@@ -50,7 +54,7 @@ export function RepTokensDemo() {
   const navBarTokenCards = buildTokenCards(
     tokensData.tokens,
     tokensData.address,
-    navBarTokenGroupConfigProps.tokenCardProps,
+    navBarTokenGroupConfigProps.tokenCardConfigProps,
   );
   const navBarTokenGroupCardProps = buildTokenGroupCard(
     navBarTokenGroupConfigProps,
@@ -62,22 +66,17 @@ export function RepTokensDemo() {
     navBarTokenGroupCardProps.addressOutput = <Address props={navBarTokenGroupCardProps.addressProps} />;
   }
 
+  const singleCard0 = buildTokenCard(tokensData.tokens[0], tokensData.address, tokenCardConfigProps);
+
   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] ">
-        <div>
-          <TokenGroupCard
-            address={tokensData.address}
-            tokenCardsProps={navBarTokenCard}
-            elementsClasses={navBarTokenGroupCardElementsClasses}
-            isBeautifyingTokenGroupCardLoadingProps={isBeuatyingNavBarTokenGroupCardLoadingProps}
-          />
-        </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></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} />
+          <TokenCard props={singleCard0} />
         </div>
       </div>
 
@@ -92,6 +91,12 @@ export function RepTokensDemo() {
           <TokenGroupCard props={mainTokenGroupOverlayCardProps} />
         </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>
     </>
   );
 }
diff --git a/packages/nextjs/components/rep-tokens/types/Types.tsx b/packages/nextjs/components/rep-tokens/types/Types.tsx
@@ -35,5 +35,5 @@ export interface TokenGroupCardConfigProps {
   cardClasses: CardClasses;
   address?: ValueCardConfigProps;
   isPrettyLoading: boolean;
-  tokenCardProps: TokenCardConfigProps;
+  tokenCardConfigProps: TokenCardConfigProps;
 }