feat: buttons now have distinct icons for different types

framegear/components/Frame/Frame.tsx

@@ -1,5 +1,6 @@
 import { postFrame } from '@/utils/postFrame';
 import { frameResultsAtom } from '@/utils/store';
+import { ExternalLinkIcon, RocketIcon, TokensIcon } from '@radix-ui/react-icons';
 import { useAtom } from 'jotai';
 import { PropsWithChildren, useCallback, useMemo } from 'react';
 
@@ -119,14 +120,26 @@ function FrameButton({
     }
     // TODO: implement other actions
   }, [button, setResults]);
+  const buttonIcon = useMemo(() => {
+    switch (button?.action) {
+      case 'link':
+        return <ExternalLinkIcon />;
+      case 'post_redirect':
+        return <RocketIcon />;
+      case 'mint':
+        return <TokensIcon />;
+      default:
+        return null;
+    }
+  }, [button?.action]);
   return (
     <button
-      className="border-button w-[45%] grow rounded-lg border bg-white p-2 text-black"
+      className="border-button flex w-[45%] grow items-center justify-center gap-1 rounded-lg border bg-white p-2 text-black"
       type="button"
       onClick={handleClick}
       disabled={button?.action !== 'post'}
     >
-      <span>{children}</span>
+      <span>{children}</span> {buttonIcon}
     </button>
   );
 }

framegear/components/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { APP_NAME } from '@/utils/constants';
-import { ArrowTopRightIcon } from '@radix-ui/react-icons';
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
 
 export function Header() {
@@ -31,7 +31,7 @@ function Banner() {
         className="bg-link-button flex items-center gap-1 rounded-full px-4 py-2"
         href="https://docs.farcaster.xyz/reference/frames/spec"
       >
-        <span>Farcaster Frames specs</span> <ArrowTopRightIcon />
+        <span>Farcaster Frames specs</span> <ExternalLinkIcon />
       </Link>
     </div>
   );