feat: follow button in the list (#388)

src/components/common/CharacterList.tsx

@@ -1,15 +1,11 @@
 import { useTranslation } from "next-i18next"
+import React from "react"
 import InfiniteScroll from "react-infinite-scroller"
 
-import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
-import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { Modal } from "~/components/ui/Modal"
-import { CSB_SCAN } from "~/lib/env"
-import { getSiteLink } from "~/lib/helpers"
 
-import { Avatar } from "../ui/Avatar"
 import { Button } from "../ui/Button"
-import { UniLink } from "../ui/UniLink"
+import CharacterListItem from "./CharacterListItem"
 
 export const CharacterList: React.FC<{
   open: boolean
@@ -24,7 +20,7 @@ export const CharacterList: React.FC<{
   const { t } = useTranslation("common")
 
   return (
-    <Modal open={open} setOpen={setOpen} title={title}>
+    <Modal open={open} setOpen={setOpen} title={title} zIndex={20}>
       <div className="px-5 overflow-auto flex-1">
         <InfiniteScroll
           loadMore={loadMore}
@@ -41,43 +37,11 @@ export const CharacterList: React.FC<{
               page?.list?.map((sub: any, index) => {
                 const character = sub?.character || sub?.fromCharacter
                 return (
-                  <div
-                    className="py-3 flex items-center space-x-2 text-sm"
+                  <CharacterListItem
                     key={index}
-                  >
-                    <UniLink
-                      href={getSiteLink({
-                        subdomain: character?.handle,
-                      })}
-                      className="flex items-center space-x-2 text-sm min-w-0"
-                    >
-                      <CharacterFloatCard siteId={character?.handle}>
-                        <Avatar
-                          className="align-middle border-2 border-white"
-                          images={character?.metadata?.content?.avatars || []}
-                          name={
-                            character?.metadata?.content?.name ||
-                            character?.handle
-                          }
-                          size={40}
-                        />
-                      </CharacterFloatCard>
-                      <span>{character?.metadata?.content?.name}</span>
-                      <span className="text-zinc-400 truncate max-w-xs">
-                        @{character?.handle}
-                      </span>
-                    </UniLink>
-                    <UniLink
-                      href={
-                        CSB_SCAN +
-                        "/tx/" +
-                        (sub.metadata?.proof || sub.transactionHash)
-                      }
-                      className="flex items-center"
-                    >
-                      <BlockchainIcon />
-                    </UniLink>
-                  </div>
+                    sub={sub}
+                    character={character}
+                  />
                 )
               }),
             )

src/components/common/CharacterListItem.tsx

@@ -0,0 +1,60 @@
+import React, { memo } from "react"
+
+import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
+import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
+import { CSB_SCAN } from "~/lib/env"
+import { getSiteLink } from "~/lib/helpers"
+
+import { Avatar } from "../ui/Avatar"
+import { UniLink } from "../ui/UniLink"
+import { FollowingButton } from "./FollowingButton"
+
+const CharacterListItem: React.FC<{
+  character: any
+  sub: any
+}> = ({ character, sub }) => {
+  return (
+    <div className="py-3 flex items-center justify-between space-x-2 text-sm">
+      <div className="flex flex-1 overflow-hidden space-x-2">
+        <UniLink
+          href={getSiteLink({
+            subdomain: character?.handle,
+          })}
+          className="flex items-center space-x-2 text-sm min-w-0"
+        >
+          <CharacterFloatCard siteId={character?.handle}>
+            <Avatar
+              className="align-middle border-2 border-white"
+              images={character?.metadata?.content?.avatars || []}
+              name={character?.metadata?.content?.name || character?.handle}
+              size={40}
+            />
+          </CharacterFloatCard>
+          <span>{character?.metadata?.content?.name}</span>
+          <span className="text-zinc-400 truncate">@{character?.handle}</span>
+        </UniLink>
+        <UniLink
+          href={
+            CSB_SCAN + "/tx/" + (sub.metadata?.proof || sub.transactionHash)
+          }
+          className="flex items-center"
+        >
+          <BlockchainIcon />
+        </UniLink>
+      </div>
+      <FollowingButton
+        site={
+          {
+            username: character?.handle,
+            metadata: {
+              proof: character?.characterId,
+            },
+          } as any
+        }
+        size="sm"
+      />
+    </div>
+  )
+}
+
+export default memo(CharacterListItem)

src/components/ui/Modal.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React from "react"
 
 import { Dialog } from "@headlessui/react"
@@ -11,12 +12,13 @@ export const Modal: React.FC<{
   title?: string | React.ReactNode
   titleIcon?: React.ReactNode
   size?: "md" | "lg" | "sm"
-}> = ({ open, setOpen, children, title, titleIcon, size = "md" }) => {
+  zIndex?: number
+}> = ({ open, setOpen, children, title, titleIcon, size = "md", zIndex }) => {
   return (
     <Dialog
       open={open}
       onClose={() => setOpen(false)}
-      className="relative z-50"
+      className={clsx("relative", zIndex ? `z-${zIndex}` : "z-50")}
     >
       {/* The backdrop, rendered as a fixed sibling to the panel container */}
       <div className="fixed inset-0 bg-black/30 z-40" aria-hidden={true} />