refactor(app): follow the design of user identities

Author: ourai

src/app/u/[handle]/layout.js

@@ -27,7 +27,7 @@ export default async function UserProfileLayout({ params, children }) {
     <>
       <BannerWidget data={data} onUpload={revalidatePathAction} />
       <div className="relative max-w-[1440px] min-h-[620px] mx-auto p-6 bg-white md:p-0 md:bg-transparent">
-        <InfoCard data={data} />
+        <InfoCard className="md:absolute md:top-[-161px]" data={data} />
         <div className="pt-6">{children}</div>
       </div>
     </>

src/domain/profile/widgets/profile-card/IdentityInfo.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2024 OpenBuild
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import clsx from 'clsx';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { ArrowsRightLeftIcon } from '@/components/icon/outlined';
+
+type UserIdentity = {
+  text: string,
+  getUrl: (userName: string) => string,
+  textColor: string,
+  bgColor: string;
+};
+
+const identityMap: Record<string, UserIdentity> = {
+  builder: {
+    text: 'Builder',
+    getUrl: userName => `/u/${userName}`,
+    textColor: 'text-[#3AAB76]',
+    bgColor: 'bg-[rgba(58,171,118,0.1)]',
+  },
+  creator: {
+    text: 'Creator',
+    getUrl: userName => `/u/${userName}/creator`,
+    textColor: 'text-[#7B6CCF]',
+    bgColor: 'bg-[rgba(123,108,207,0.1)]',
+  },
+};
+
+function IdentitySwitch({ className, userName }: { className?: string, userName: string }) {
+  const pathname = usePathname();
+
+  const creatorProfileLink = identityMap.creator.getUrl(userName);
+  const identity = identityMap[pathname.startsWith(creatorProfileLink) ? 'builder' : 'creator'];
+
+  return (
+    <Link
+      className={clsx(
+        'flex items-center gap-1 h-6 px-2 text-sm rounded-full',
+        identity.textColor,
+        identity.bgColor,
+        className,
+      )}
+      href={identity.getUrl(userName)}
+    >
+      <span>{identity.text}</span>
+      <ArrowsRightLeftIcon className="size-3" />
+    </Link>
+  );
+}
+
+export default IdentitySwitch;

src/domain/profile/widgets/profile-card/IdentitySwitch.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import clsx from 'clsx';
 import { useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
@@ -30,9 +31,9 @@ import { post, fetcher } from '@/utils/request';
 import { useUser } from '#/state/application/hooks';
 
 import SocialInfoWidget from '../social-info';
-import IdentityInfo from './IdentityInfo';
+import IdentitySwitch from './IdentitySwitch';
 
-function ProfileCardWidget({ data }) {
+function ProfileCardWidget({ className, data }) {
   const router = useRouter();
   const pathname = usePathname();
   const user = useUser();
@@ -75,7 +76,7 @@ function ProfileCardWidget({ data }) {
   };
 
   return (
-    <div className="md:absolute md:top-[-161px] md:w-[360px] md:rounded-lg md:p-6 md:bg-white">
+    <div className={clsx('relative md:w-[360px] md:rounded-lg md:p-6 md:bg-white', className)}>
       <div className="flex flex-col gap-2 items-center">
         <Avatar
           className="-mt-[104px] md:mt-0"
@@ -126,7 +127,9 @@ function ProfileCardWidget({ data }) {
           <Link href="/" className="text-xs opacity-60">+ Follow</Link>
         </div>
       </>} */}
-      {creatorAvailable && <IdentityInfo userName={handle} />}
+      {creatorAvailable && (
+        <IdentitySwitch className="absolute top-4 right-4" userName={handle} />
+      )}
       <SocialInfoWidget className="hidden md:block" data={data} />
     </div>
   );

src/domain/profile/widgets/profile-card/ProfileCard.js

@@ -15,7 +15,7 @@
  */
 
 export {
-  ArrowLeftIcon, ArrowDownTrayIcon,
+  ArrowLeftIcon, ArrowDownTrayIcon, ArrowsRightLeftIcon,
   EyeIcon, EyeSlashIcon,
   PlusIcon, MinusCircleIcon,
   ChevronLeftIcon, ChevronRightIcon,