From 7e3d417385092c58d0793e4a234dc2bd15ba29d8 Mon Sep 17 00:00:00 2001
From: Christopher Nascone <cnasc@users.noreply.github.com>
Date: Thu, 29 Feb 2024 15:27:33 -0500
Subject: [PATCH] feat: button icons (framegear) (#203)

---
 framegear/components/Frame/Frame.tsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
index 22e082f898..a361f64a85 100644
--- a/framegear/components/Frame/Frame.tsx
+++ b/framegear/components/Frame/Frame.tsx
@@ -2,7 +2,7 @@ import { postFrame } from '@/utils/postFrame';
 import { frameResultsAtom } from '@/utils/store';
 import { useAtom } from 'jotai';
 import { ChangeEvent, PropsWithChildren, useCallback, useMemo, useState } from 'react';
-import { ArrowTopRightIcon } from '@radix-ui/react-icons';
+import { ExternalLinkIcon, ResetIcon, RocketIcon } from '@radix-ui/react-icons';
 import { useRedirectModal } from '@/components/RedirectModalContext/RedirectModalContext';
 
 export function Frame() {
@@ -153,21 +153,31 @@ function FrameButton({
     }
     // TODO: implement other actions (mint, etc.)
   }, [button?.action, button?.index, button?.target, inputText, openModal, setResults]);
+
+  const buttonIcon = useMemo(() => {
+    switch (button?.action) {
+      case 'link':
+        return <ExternalLinkIcon />;
+      case 'post_redirect':
+        return <ResetIcon />;
+      case 'mint':
+        return <RocketIcon />;
+      default:
+        null;
+    }
+  }, [button?.action]);
+
   return (
     <button
-      className="border-button w-[45%] grow rounded-lg border bg-white px-4 py-2 text-black"
+      className="border-button flex w-[45%] grow items-center justify-center gap-1 rounded-lg border bg-white px-4 py-2 text-black"
       type="button"
       onClick={handleClick}
       disabled={isLoading || button?.action === 'mint'}
     >
-      <span className="block max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
+      <span className="block max-w-[90%] overflow-hidden text-ellipsis whitespace-nowrap">
         {children}
-        {button?.action === 'post_redirect' || button?.action === 'link' ? (
-          <ArrowTopRightIcon className="ml-1 inline" />
-        ) : (
-          ''
-        )}
       </span>
+      {buttonIcon}
     </button>
   );
 }