feat: add title badge

data/titles.json

@@ -0,0 +1,10 @@
+[
+  {
+    "name": "xLog contributor",
+    "link": "https://github.com/Crossbell-Box/xLog/graphs/contributors",
+    "list": [
+      10, 30, 12, 32022, 32179, 45, 19, 4583, 4381, 32168, 33446, 33492, 52055,
+      153, 50143, 51470
+    ]
+  }
+]

src/components/common/CharacterCard.tsx

@@ -7,6 +7,7 @@ import type { Profile } from "~/lib/types"
 import { cn } from "~/lib/utils"
 import { useDate } from "~/hooks/useDate"
 import { useTranslation } from "next-i18next"
+import { Titles } from "~/components/common/Titles"
 
 export const CharacterCard: React.FC<{
   siteId?: string
@@ -71,11 +72,12 @@ export const CharacterCard: React.FC<{
               />
             )}
           </span>
-          <span className="block">
+          <span className="flex items-center space-x-1">
             <span className="font-bold text-base text-zinc-800">
               {site?.name}
             </span>
-            <span className="ml-1 text-gray-600">@{site?.username}</span>
+            <Titles characterId={+(site.metadata?.proof || "")} />
+            <span className="text-gray-600">@{site?.username}</span>
           </span>
           {site?.description && (
             <span

src/components/common/CommentItem.tsx

@@ -13,6 +13,7 @@ import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
 import { useTranslation } from "next-i18next"
 import { useDate } from "~/hooks/useDate"
 import { useAccountState } from "@crossbell/connect-kit"
+import { Titles } from "~/components/common/Titles"
 
 export const CommentItem: React.FC<{
   comment: NoteEntity & {
@@ -70,6 +71,7 @@ export const CommentItem: React.FC<{
             >
               {comment?.character?.metadata?.content?.name}
             </UniLink>
+            <Titles characterId={comment.characterId} />
             <span>·</span>
             <time dateTime={date.formatToISO(comment?.createdAt)}>
               {t("ago", {

src/components/common/Titles.tsx

@@ -0,0 +1,49 @@
+import { cn } from "~/lib/utils"
+import data from "../../../data/titles.json"
+import { Tooltip } from "../ui/Tooltip"
+import { UniLink } from "../ui/UniLink"
+
+const icons: {
+  [key: string]: {
+    bg: string
+    icon: string
+  }
+} = {
+  "xLog contributor": {
+    bg: "bg-zinc-700 text-white",
+    icon: "i-mingcute:terminal-line",
+  },
+}
+
+export const Titles: React.FC<{
+  characterId?: number
+}> = ({ characterId }) => {
+  if (!characterId) {
+    return null
+  }
+
+  const list = data.filter((title) => title.list.includes(characterId))
+
+  if (!list.length) {
+    return null
+  }
+
+  return (
+    <span className="inline-flex">
+      {list.map((title) => (
+        <Tooltip
+          key={title.name}
+          label={title.name}
+          childrenClassName={cn(
+            icons[title.name].bg,
+            "inline-flex p-[1px] rounded-sm",
+          )}
+        >
+          <UniLink href={title.link} className="inline-flex">
+            <i className={cn(icons[title.name].icon, "text-[10px]")} />
+          </UniLink>
+        </Tooltip>
+      ))}
+    </span>
+  )
+}

src/components/main/MainFeed.tsx

@@ -13,6 +13,7 @@ import { useEffect, useState } from "react"
 import { Switch } from "@headlessui/react"
 import { setStorage, getStorage } from "~/lib/storage"
 import { Tooltip } from "~/components/ui/Tooltip"
+import { Titles } from "~/components/common/Titles"
 
 const Post = ({
   post,
@@ -56,6 +57,7 @@ const Post = ({
             </span>
           </div>
         </CharacterFloatCard>
+        <Titles characterId={post.characterId} />
         <span className="text-zinc-400">·</span>
         <time
           dateTime={date.formatToISO(post.createdAt)}

src/components/ui/Tooltip.tsx

@@ -21,6 +21,7 @@ interface Props {
   children: JSX.Element
   className?: string
   inline?: boolean
+  childrenClassName?: string
 }
 
 export const Tooltip = ({
@@ -28,6 +29,7 @@ export const Tooltip = ({
   label,
   placement = "top",
   className,
+  childrenClassName,
   inline,
 }: Props) => {
   const [open, setOpen] = useState(false)
@@ -56,7 +58,11 @@ export const Tooltip = ({
       <div
         ref={refs.setReference}
         {...getReferenceProps()}
-        className={cn("items-center", inline ? "inline-flex" : "flex")}
+        className={cn(
+          "items-center",
+          inline ? "inline-flex" : "flex",
+          childrenClassName,
+        )}
       >
         {children}
       </div>