refactor: move component definitions outside the component (#1531)

src/app/[locale]/(home)/about/page.tsx

@@ -1,10 +1,9 @@
 import { getTranslations } from "next-intl/server"
 import Link from "next/link"
-import { memo } from "react"
 
 import { Logo } from "~/components/common/Logo"
 import { BlockNumber } from "~/components/home/BlockNumber"
-import { default as OriginEntranceButton } from "~/components/home/EntranceButton"
+import { EntranceButton } from "~/components/home/EntranceButton"
 import { Integration } from "~/components/home/Integrations"
 import { ShowCase } from "~/components/home/Showcase"
 import { Button } from "~/components/ui/Button"
@@ -12,23 +11,9 @@ import { Image } from "~/components/ui/Image"
 import { CSB_SCAN, GITHUB_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 
-async function Home() {
+export default async function Home() {
   const t = await getTranslations()
 
-  const EntranceButton = memo(function Button() {
-    return (
-      <OriginEntranceButton
-        connectedContent={
-          <>
-            <span className="i-mingcute-grid-line text-xl mr-2 inline-block"></span>
-            <span>{t("Dashboard")}</span>
-          </>
-        }
-        unconnectedContent={t("Get my xLog in 5 minutes")}
-      />
-    )
-  })
-
   const features: {
     title: string
     subfeatures: {
@@ -181,7 +166,7 @@ async function Home() {
                   }
                 ></div>
                 <div
-                  className={`block rounded-full w-10 h-10 mx-auto p-2 text-white bg-gradient-to-br text-feature-${feature.title.toLocaleLowerCase()}`}
+                  className={`block rounded-full size-10 mx-auto p-2 text-white bg-gradient-to-br text-feature-${feature.title.toLocaleLowerCase()}`}
                 >
                   {index + 1}
                 </div>
@@ -325,7 +310,7 @@ async function Home() {
         </div>
       </div>
       <div className="my-20 text-center">
-        <div className="w-[100px] h-[100px] mx-auto mb-10">
+        <div className="size-[100px] mx-auto mb-10">
           <Logo type="lottie" width={100} height={100} loop={true} />
         </div>
         <EntranceButton />
@@ -333,5 +318,3 @@ async function Home() {
     </div>
   )
 }
-
-export default Home

src/components/home/EntranceButton.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useTranslations } from "next-intl"
 import { useRouter } from "next/navigation"
 import React from "react"
 
@@ -7,13 +8,9 @@ import { useAccountState } from "@crossbell/connect-kit"
 
 import { Button } from "~/components/ui/Button"
 
-interface Props {
-  connectedContent: React.ReactNode
-  unconnectedContent: React.ReactNode
-}
-
-export default function EntranceButton(props: Props) {
+export function EntranceButton() {
   const router = useRouter()
+  const t = useTranslations()
   const isConnected = useAccountState((s) => !!s.computed.account)
 
   return (
@@ -23,7 +20,14 @@ export default function EntranceButton(props: Props) {
       size="2xl"
       variantColor="black"
     >
-      {isConnected ? props.connectedContent : props.unconnectedContent}
+      {isConnected ? (
+        <>
+          <span className="i-mingcute-grid-line text-xl mr-2 inline-block"></span>
+          <span>{t("Dashboard")}</span>
+        </>
+      ) : (
+        <span>{t("Get my xLog in 5 minutes")}</span>
+      )}
     </Button>
   )
 }