feat: Add Pro badge to multiple account display components

heyverse · Mar 1, 2025 · b0c9148 · b0c9148
1 parent e09f415
commit b0c9148
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 0 deletions.
diff --git a/apps/web/src/components/Notification/Account.tsx b/apps/web/src/components/Notification/Account.tsx
@@ -1,3 +1,4 @@
+import Pro from "@components/Shared/Account/Icons/Pro";
 import Verified from "@components/Shared/Account/Icons/Verified";
 import AccountPreview from "@components/Shared/AccountPreview";
 import getAccount from "@hey/helpers/getAccount";
@@ -54,6 +55,7 @@ export const NotificationAccountName: FC<NotificationProfileProps> = ({
       >
         <span>{getAccount(account).name}</span>
         <Verified address={account.address} iconClassName="size-4" />
+        <Pro account={account} iconClassName="size-4" />
       </Link>
     </AccountPreview>
   );

diff --git a/apps/web/src/components/Post/PostAccount.tsx b/apps/web/src/components/Post/PostAccount.tsx
@@ -1,3 +1,4 @@
+import Pro from "@components/Shared/Account/Icons/Pro";
 import Verified from "@components/Shared/Account/Icons/Verified";
 import formatRelativeOrAbsolute from "@hey/helpers/datetime/formatRelativeOrAbsolute";
 import getAccount from "@hey/helpers/getAccount";
@@ -54,6 +55,7 @@ const PostAccount: FC<PostAccountProps> = ({
           />
         </WrappedLink>
         <Verified address={account.address} iconClassName="size-4" />
+        <Pro account={account} iconClassName="size-4" />
         {timestamp ? (
           <span className="ld-text-gray-500">
             <span className="mr-1">·</span>

diff --git a/apps/web/src/components/Shared/AccountPreview.tsx b/apps/web/src/components/Shared/AccountPreview.tsx
@@ -11,6 +11,7 @@ import plur from "plur";
 import type { FC, ReactNode } from "react";
 import { useState } from "react";
 import FollowUnfollowButton from "./Account/FollowUnfollowButton";
+import Pro from "./Account/Icons/Pro";
 import Verified from "./Account/Icons/Verified";
 import Markup from "./Markup";
 import Slug from "./Slug";
@@ -100,6 +101,7 @@ const AccountPreview: FC<AccountPreviewProps> = ({
         <div className="flex max-w-sm items-center gap-1 truncate">
           <div className="text-md">{getAccount(account).name}</div>
           <Verified address={account.address} iconClassName="size-4" />
+          <Pro account={account} iconClassName="size-4" />
         </div>
         <span>
           <Slug

diff --git a/apps/web/src/components/Shared/SingleAccount.tsx b/apps/web/src/components/Shared/SingleAccount.tsx
@@ -8,6 +8,7 @@ import Link from "next/link";
 import type { FC, ReactNode } from "react";
 import { memo } from "react";
 import FollowUnfollowButton from "./Account/FollowUnfollowButton";
+import Pro from "./Account/Icons/Pro";
 import Verified from "./Account/Icons/Verified";
 import AccountPreview from "./AccountPreview";
 import Markup from "./Markup";
@@ -57,6 +58,7 @@ const SingleAccount: FC<SingleAccountProps> = ({
           </div>
         </div>
         <Verified address={account.address} iconClassName="ml-1 size-4" />
+        <Pro account={account} iconClassName="ml-1 size-4" />
       </div>
       <Slug className="text-sm" slug={getAccount(account).usernameWithPrefix} />
     </>

diff --git a/apps/web/src/components/Shared/SmallSingleAccount.tsx b/apps/web/src/components/Shared/SmallSingleAccount.tsx
@@ -7,6 +7,7 @@ import cn from "@hey/ui/cn";
 import Link from "next/link";
 import type { FC } from "react";
 import { memo } from "react";
+import Pro from "./Account/Icons/Pro";
 import Verified from "./Account/Icons/Verified";
 import Slug from "./Slug";
 
@@ -45,6 +46,7 @@ const SmallSingleAccount: FC<SmallSingleAccountProps> = ({
         {getAccount(account).name}
       </div>
       <Verified address={account.address} iconClassName="mr-1 size-4" />
+      <Pro account={account} iconClassName="mr-1 size-4" />
       {!hideSlug && (
         <Slug
           className="text-sm"