feat: update web3bio profile

Author: Asa0oo0o0o

public/images/svg/basenames-blue.svg

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
+import { SvgIcon } from '@/components/Image';
 import { capitalize } from '@/utils';
 
-import SocialLink from './SocialLink';
-
 const socialKeyMap = {
   github: 'user_github',
   discord: 'user_discord',
@@ -36,18 +35,65 @@ function resolveLinks({ social, web3Bio = [] }) {
   return web3Bio.reduce((p, c) => [].concat(p, filterExistsInOpenBuild(c.links, social)), []);
 }
 
+function socialsConfig(type) {
+  switch (type) {
+  case 'farcaster':
+    return {
+      icon: 'farcaster-purple',
+      color: '#8A63D21A',
+    };
+  case 'lens':
+    return {
+      icon: 'lens-green',
+      color: '#6BC6741A',
+    };
+  case 'basenames':
+    return {
+      icon: 'basenames-blue',
+      color: '#0052FF1A',
+    };
+  default:
+    return {
+      icon: 'link',
+      color: '#1A1A1A1A',
+    };
+  }
+}
+
 function Web3BioProfile({ data }) {
   const links = resolveLinks(data);
 
-  return links.length > 0 && (
-    <>
-      <p className="mt-6 uppercase text-xs opacity-60 font-bold">More from <a className="underline" href={`https://web3.bio/${data.social.user_wallet}`} target="_blank" rel="noreferrer">web3.bio</a></p>
-      <div className="border border-gray-600 rounded overflow-hidden mt-2">
-        {links.map(([k, profile]) => (
-          <SocialLink key={`web3bio-social-${k}`} icon="link" url={profile.link}>{specialTextMap[k] || capitalize(k)}</SocialLink>
-        ))}
-      </div>
-    </>
+  return (
+    links.length > 0 && (
+      <>
+        <div className="mt-6 text-xs flex gap-1">
+          <p className="uppercase opacity-60 font-bold flex-1">Onchain Identities</p>
+          <div className="opacity-40">Built with</div>
+          <a className="" href={`https://web3.bio/${data.social.user_wallet}`} target="_blank" rel="noreferrer">
+            web3.bio
+          </a>
+        </div>
+
+        <div className="mt-3 flex gap-2 flex-wrap">
+          {links.map(([k, profile]) => (
+            <a
+              key={`web3bio-social-${k}`}
+              className="flex gap-1 rounded-[6px] px-1 h-7 text-sm border items-center"
+              style={{
+                borderColor: socialsConfig(k).color,
+                backgroundColor: socialsConfig(k).color,
+              }}
+              href={profile.link}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <SvgIcon name={socialsConfig(k).icon} size={16} />
+              {specialTextMap[k] || capitalize(k)}
+            </a>
+          ))}
+        </div>
+      </>
+    )
   );
 }