displaying all single card representations

packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx

@@ -7,6 +7,7 @@ import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards
 import { StylizedStringCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedStringCard";
 import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard";
 import { StylizedTokenCard2 } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard2";
+import { StylizedTokenCard3 } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard3";
 // import {
 //   ReputationComponent,
 //   StylizedTokenGroupCard,
@@ -130,27 +131,21 @@ export function RepTokensDemo() {
         <div className="flex">
           <div>
             <p className="text-center text-4xl">Single Card 1</p>
-            <StylizedTokenCard token={token} />
-          </div>
-          <div>
-            <p className="text-center text-4xl">Single Card 2</p>
             <StylizedTokenCard2>
               <StylizedBalanceCard value={Number(token?.balance)} />
               <StylizedImageCard src={token?.image} />
-
               <StylizedStringCard value={token?.name} type="bold" />
               <StylizedStringCard value={token?.description} />
               <StylizedAddressCard address={token?.address} />
               <StylizedStringCard value={`Token Type: ${token?.properties?.tokenType?.toString()}`} />
-
               <StylizedStringCard
                 value={`Max Mint Amount Per Tx \n${token?.properties?.maxMintAmountPerTx?.toString()}`}
               />
             </StylizedTokenCard2>
           </div>
 
           <div>
-            <p className="text-center text-4xl">Single Card 3</p>
+            <p className="text-center text-4xl">Single Card 2</p>
             <StylizedTokenCard2>
               <BalanceCard token={token} />
               <ImageCard token={token} />
@@ -162,6 +157,15 @@ export function RepTokensDemo() {
               <MaxMintAmountPerTxCard token={token} />
             </StylizedTokenCard2>
           </div>
+
+          <div>
+            <p className="text-center text-4xl">Single Card 3</p>
+            <StylizedTokenCard token={token} />
+          </div>
+          <div>
+            <p className="text-center text-4xl">Single Card 4</p>
+            <StylizedTokenCard3 token={token} />
+          </div>
         </div>
         {/* <p className="text-center text-4xl">Multi-Card</p>
 

packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard3.tsx

@@ -0,0 +1,99 @@
+import { Token } from "../../hooks/Hooks";
+import { BalanceImageOverlay } from "./BalanceImageOverlay";
+import { ReputationComponent } from "./StylizedTokenGroupCard";
+import { AddressCard } from "./token-properties/AddressCard";
+import { BalanceCard } from "./token-properties/BalanceCard";
+import { DescriptionCard } from "./token-properties/DescriptionCard";
+import { ImageCard } from "./token-properties/ImageCard";
+import { MaxMintAmountPerTxCard } from "./token-properties/MaxMintAmountPerTxCard";
+import { NameCard } from "./token-properties/NameCard";
+import { TokenTypeCard } from "./token-properties/TokenTypeCard";
+
+export type Size = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
+
+export interface TokenCardInternalProps {
+  token: Token;
+  size?: Size;
+  children?: React.ReactNode;
+  components?: ReputationComponent[];
+  isBalanceOverlayed?: boolean;
+}
+
+const sizeMap = {
+  xs: "",
+  sm: "px-1 py-1 w-20",
+  base: "p-5 m-4 w-64",
+  lg: "",
+  xl: "",
+  "2xl": "",
+  "3xl": "",
+};
+
+export const StylizedTokenCard3 = ({
+  size = "base",
+  // children,
+  token,
+  components = ["Balance", "Image", "Name", "Description", "Address", "TokenType", "MaxMintAmountPerTx"],
+  isBalanceOverlayed = false,
+}: TokenCardInternalProps) => {
+  const cardContent: JSX.Element[] = [];
+
+  for (let j = 0; j < components?.length; j++) {
+    if (components[j] === "Balance") {
+      if (isBalanceOverlayed) {
+        let doesImageComponentExist;
+        for (let k = 0; k < components?.length; k++) {
+          if (k === j) continue;
+
+          if (components[k] === "Image") {
+            doesImageComponentExist = true;
+            break;
+          }
+        }
+
+        if (doesImageComponentExist) {
+          cardContent.push(
+            <BalanceImageOverlay key={j} balance={Number(token?.balance)} image={token?.image} size={size} />,
+          );
+        } else {
+          cardContent.push(<BalanceCard key={j} token={token} isOverlay={false} size={size} />);
+        }
+      } else {
+        cardContent.push(<BalanceCard key={j} token={token} isOverlay={false} size={size} />);
+      }
+    }
+
+    if (!isBalanceOverlayed) {
+      if (components[j] === "Image") {
+        cardContent.push(<ImageCard key={j} token={token} />);
+      }
+    }
+
+    if (components[j] === "Name") {
+      cardContent.push(<NameCard key={j} token={token} />);
+    }
+
+    if (components[j] === "Description") {
+      cardContent.push(<DescriptionCard key={j} token={token} />);
+    }
+
+    if (components[j] === "TokenType") {
+      cardContent.push(<TokenTypeCard key={j} token={token} />);
+    }
+
+    if (components[j] === "MaxMintAmountPerTx") {
+      cardContent.push(<MaxMintAmountPerTxCard key={j} token={token} />);
+    }
+
+    if (components[j] === "Address") {
+      cardContent.push(<AddressCard key={j} token={token} />);
+    }
+  }
+
+  return (
+    <div className={`bg-base-100 rounded-lg ${sizeMap[size]} relative p-1`}>
+      {/* {children} */}
+      {cardContent}
+    </div>
+  );
+};

packages/nextjs/components/rep-tokens/cards/stylized-cards/token-properties/BalanceCard.tsx

@@ -4,8 +4,12 @@ import { Token } from "~~/components/rep-tokens/hooks/Hooks";
 type Props = {
   token?: Token;
   balance?: bigint;
+  isOverlay?: boolean;
+  size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl";
 };
 
-export const BalanceCard = ({ token, balance }: Props) => {
-  return <StylizedBalanceCard value={token ? Number(token?.balance) : Number(balance)} />;
+export const BalanceCard = ({ token, balance, isOverlay, size }: Props) => {
+  return (
+    <StylizedBalanceCard value={token ? Number(token?.balance) : Number(balance)} isOverlay={isOverlay} size={size} />
+  );
 };