From ec88f583f173d812622c332ebf72487313af1598 Mon Sep 17 00:00:00 2001
From: Jacob Homanics <homanicsjake@gmail.com>
Date: Sun, 31 Mar 2024 02:59:07 -0400
Subject: [PATCH] image overlay

---
 .../_components/RepTokensDemo.tsx             | 11 ++++++
 .../stylized-cards/BalanceImageOverlay.tsx    | 18 +++++++++
 .../stylized-cards/StylizedBalanceCard.tsx    | 18 +++++++--
 .../stylized-cards/StylizedTokenCard.tsx      |  2 +-
 .../stylized-cards/StylizedTokenGroupCard.tsx | 39 +++++++++++++++++--
 5 files changed, 80 insertions(+), 8 deletions(-)
 create mode 100644 packages/nextjs/components/rep-tokens/cards/stylized-cards/BalanceImageOverlay.tsx

diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index 06a4825..7c1e1f4 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -12,6 +12,7 @@ import { useAccount } from "wagmi";
 import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardConfig";
 import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardWithNumberOverlayConfig";
 import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/configs/NavBarCardConfig";
+import { BalanceImageOverlay } from "~~/components/rep-tokens/cards/stylized-cards/BalanceImageOverlay";
 import { StylizedAddressCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedAddressCard";
 import { StylizedBalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard";
 import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedImageCard";
@@ -182,12 +183,16 @@ export function RepTokensDemo() {
     "MaxMintAmountPerTx",
   ];
 
+  const widgetComponents = ["Balance", "Image"];
+
   return (
     <>
       <div className="py-5 space-y-5 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] ">
         <StylizedTokenCard>
           <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
           <StylizedImageCard src={tokensData.tokens[0]?.image} />
+          <BalanceImageOverlay balance={Number(tokensData.tokens[0]?.balance)} image={tokensData.tokens[0]?.image} />
+
           <StylizedStringCard value={tokensData.tokens[0]?.name} color="violet" type="bold" />
           <StylizedStringCard value={tokensData.tokens[0]?.description} color="lime" />
           <StylizedAddressCard address={tokensData.tokens[0]?.address} color="pink" />
@@ -209,6 +214,12 @@ export function RepTokensDemo() {
           <StylizedAddressCard address={tokensData.address} isGroup={true} />
         </StylizedTokenGroupCard>
 
+        <StylizedTokenGroupCard tokens={tokensData.tokens} components={mainComponents} isBalanceOverlayed={true}>
+          <StylizedAddressCard address={tokensData.address} isGroup={true} />
+        </StylizedTokenGroupCard>
+
+        <StylizedTokenGroupCard tokens={tokensData.tokens} components={widgetComponents} isBalanceOverlayed={true} />
+
         <p>Faucet Balance:</p>
         <p>
           0: {balanceOf0?.toString()}, 1: {balanceOf1?.toString()}, 2: {balanceOf2?.toString()}
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/BalanceImageOverlay.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/BalanceImageOverlay.tsx
new file mode 100644
index 0000000..d865984
--- /dev/null
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/BalanceImageOverlay.tsx
@@ -0,0 +1,18 @@
+import { Color } from "./Stylized";
+import { StylizedBalanceCard } from "./StylizedBalanceCard";
+import { StylizedImageCard } from "./StylizedImageCard";
+
+type BalanceProps = {
+  balance: number;
+  image: string;
+  color?: Color;
+};
+
+export const BalanceImageOverlay = ({ balance, image }: BalanceProps) => {
+  return (
+    <div className="relative">
+      <StylizedBalanceCard value={Number(balance)} isOverlay />
+      <StylizedImageCard src={image} />
+    </div>
+  );
+};
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard.tsx
index 69bb755..b99e5ce 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard.tsx
@@ -3,12 +3,24 @@ import { Color } from "./Stylized";
 type BalanceProps = {
   value: number;
   color?: Color;
+  isOverlay?: boolean;
 };
 
-export const StylizedBalanceCard = ({ value, color = "slate" }: BalanceProps) => {
+export const StylizedBalanceCard = ({ value, color = "slate", isOverlay }: BalanceProps) => {
+  let cardClasses;
+  let textClasses;
+
+  if (isOverlay) {
+    cardClasses = "absolute inset-10 items-center justify-center";
+    textClasses = "text-9xl mx-auto text-center text-black";
+  } else {
+    cardClasses = `rounded-lg bg-${color}-300`;
+    textClasses = "text-4xl mx-auto text-center text-black";
+  }
+
   return (
-    <div className={`rounded-lg bg-${color}-300`}>
-      <p className="text-4xl mx-auto text-center text-black">{value.toString()}</p>
+    <div className={cardClasses}>
+      <p className={textClasses}>{value.toString()}</p>
     </div>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
index c95720b..56c5c81 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenCard.tsx
@@ -5,5 +5,5 @@ export interface TokenCardInternalProps {
 }
 
 export const StylizedTokenCard = ({ color = "slate", children }: any) => {
-  return <div className={`bg-${color}-600 rounded-lg p-5 m-4 w-64`}>{children}</div>;
+  return <div className={`bg-${color}-600 rounded-lg relative p-5 m-4 w-64`}>{children}</div>;
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
index 586f52a..862addc 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
@@ -1,3 +1,4 @@
+import { BalanceImageOverlay } from "./BalanceImageOverlay";
 import { Color } from "./Stylized";
 import { StylizedAddressCard } from "./StylizedAddressCard";
 import { StylizedBalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard";
@@ -9,6 +10,7 @@ export interface TokenCardInternalProps {
   tokens: any[];
   components?: ReputationComponent[];
   color?: Color;
+  isBalanceOverlayed?: boolean;
 }
 
 export type ReputationComponent =
@@ -34,7 +36,7 @@ export const StylizedTokenGroupCard = ({
     "MaxMintAmountPerTx",
   ],
   color = "slate",
-
+  isBalanceOverlayed,
   children,
 }: any) => {
   const output: any[] = [];
@@ -44,11 +46,40 @@ export const StylizedTokenGroupCard = ({
 
     for (let j = 0; j < components?.length; j++) {
       if (components[j] === "Balance") {
-        cardContent.push(<StylizedBalanceCard key={j} value={Number(tokens[i]?.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(tokens[i]?.balance)} image={tokens[i]?.image} />,
+            );
+          } else {
+            cardContent.push(<StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} />);
+          }
+        } else {
+          cardContent.push(<StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={false} />);
+        }
       }
 
-      if (components[j] === "Image") {
-        cardContent.push(<StylizedImageCard key={j} src={tokens[i]?.image} />);
+      // if (components[j] == "Balance")
+      //   if (components[j] === "Balance") {
+      //     cardContent.push(
+      //       <StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} isOverlay={isBalanceOverlayed} />,
+      //     );
+      //   }
+
+      if (!isBalanceOverlayed) {
+        if (components[j] === "Image") {
+          cardContent.push(<StylizedImageCard key={j} src={tokens[i]?.image} />);
+        }
       }
 
       if (components[j] === "Name") {