fix: i18n in app router (#496)

src/app/(home)/components/EntranceButton.tsx

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

src/app/(home)/components/Header.tsx

@@ -1,13 +1,10 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-import { useTranslation } from "react-i18next"
-
 import { ConnectButton } from "~/components/common/ConnectButton"
 import { Logo } from "~/components/common/Logo"
 import { Image } from "~/components/ui/Image"
 import { UniLink } from "~/components/ui/UniLink"
+import { useAcceptLang } from "~/hooks/useAcceptLang"
 import { GITHUB_LINK } from "~/lib/env"
+import { useTranslation } from "~/lib/i18n"
 import { cn } from "~/lib/utils"
 
 const tabs = [
@@ -31,9 +28,13 @@ const tabs = [
   },
 ]
 
-export function Header() {
-  const { t } = useTranslation("index")
-  const pathname = usePathname()
+export async function Header() {
+  const lang = useAcceptLang()
+  const { t } = await useTranslation(lang, "index")
+  // const pathname = usePathname()
+  // TODO how to set active state for Link in RSC,
+  // make <UniLink> be client component and add activeClass props or some way else
+  const pathname = "/"
   return (
     <header className="py-5 fixed w-full top-0 bg-white z-10">
       <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">

src/app/(home)/components/Integrations.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import {
+  CrossbellChainLogo,
+  XCharLogo,
+  XFeedLogo,
+  XShopLogo,
+  XSyncLogo,
+} from "@crossbell/ui"
+import { RssIcon } from "@heroicons/react/24/outline"
+
+import { Image } from "~/components/ui/Image"
+import { Tooltip } from "~/components/ui/Tooltip"
+import { UniLink } from "~/components/ui/UniLink"
+import { getSiteLink } from "~/lib/helpers"
+
+export function Integration() {
+  const integrations = [
+    {
+      name: "RSS",
+      icon: <RssIcon className="w-full h-full text-orange-500" />,
+      url:
+        getSiteLink({
+          subdomain: "xlog",
+        }) + "/feed?format=xml",
+    },
+    {
+      name: "JSON Feed",
+      icon: <Image src="/assets/json-feed.png" alt="JSON Feed" />,
+      url:
+        getSiteLink({
+          subdomain: "xlog",
+        }) + "/feed",
+    },
+    {
+      name: "xChar",
+      icon: <XCharLogo className="w-full h-full" />,
+      url: "https://xchar.app/",
+    },
+    {
+      name: "xFeed",
+      icon: <XFeedLogo className="w-full h-full" />,
+      url: "https://crossbell.io/feed",
+    },
+    {
+      name: "xSync",
+      icon: <XSyncLogo className="w-full h-full" />,
+      url: "https://xsync.app/",
+    },
+    {
+      name: "xShop",
+      icon: <XShopLogo className="w-full h-full" />,
+      text: "Coming soon",
+    },
+    {
+      name: "Crossbell Scan",
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
+      url: "https://scan.crossbell.io/",
+    },
+    {
+      name: "Crossbell Faucet",
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
+      url: "https://faucet.crossbell.io/",
+    },
+    {
+      name: "Crossbell Export",
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
+      url: "https://export.crossbell.io/",
+    },
+    {
+      name: "Crossbell SDK",
+      icon: <CrossbellChainLogo className="w-full h-full text-[#E7B75B]" />,
+      url: "https://crossbell-box.github.io/crossbell.js/",
+    },
+    {
+      name: "RSS3",
+      icon: (
+        <Image alt="RSS3" src="/assets/rss3.svg" className="rounded" fill />
+      ),
+      url: "https://rss3.io/",
+    },
+    {
+      name: "Hoot It",
+      icon: (
+        <Image alt="Hoot It" src="/assets/hoot.svg" className="rounded" fill />
+      ),
+      url: "https://hoot.it/search/xLog",
+    },
+    {
+      name: "Raycast",
+      icon: <Image src="/assets/raycast.png" alt="Raycast" />,
+      url: "https://www.raycast.com/Songkeys/crossbell",
+    },
+    {
+      name: "Obsidian",
+      icon: (
+        <Image
+          src="/assets/obsidian.svg"
+          alt="Obsidian"
+          className="rounded"
+          fill
+        />
+      ),
+      text: "Coming soon",
+    },
+  ]
+  return (
+    <>
+      {integrations.map((item, index) => (
+        <li
+          className="hover:scale-105 transition-transform duration-300"
+          key={index}
+        >
+          {item.url ? (
+            <UniLink
+              href={item.url}
+              className="w-full flex items-center flex-col justify-center"
+            >
+              <div className="w-12 h-12 rounded-md overflow-hidden">
+                {item.icon}
+              </div>
+              <div className="font-medium sm:text-lg mt-2 text-center">
+                {item.name}
+              </div>
+            </UniLink>
+          ) : (
+            <Tooltip label={item.text!}>
+              <div className="w-full h-full flex items-center flex-col justify-center">
+                <div className="w-12 h-12 rounded-md overflow-hidden">
+                  {item.icon}
+                </div>
+                <div className="font-medium sm:text-lg mt-2 text-center">
+                  {item.name}
+                </div>
+              </div>
+            </Tooltip>
+          )}
+        </li>
+      ))}
+    </>
+  )
+}

src/app/(home)/components/Showcase.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { FollowAllButton } from "~/components/common/FollowAllButton"
+import { useGetShowcase } from "~/queries/home"
+
+import ShowcaseList from "./ShowcaseList"
+
+export function ShowCase() {
+  const showcaseSites = useGetShowcase()
+  return (
+    <>
+      <FollowAllButton
+        className="mt-5"
+        size="xl"
+        characterIds={showcaseSites.data
+          ?.map((s: { characterId?: string }) => s.characterId)
+          .filter(Boolean)
+          .map(Number)}
+        siteIds={showcaseSites.data?.map((s: { handle: string }) => s.handle)}
+      />
+      <ShowcaseList sites={showcaseSites.data} />
+    </>
+  )
+}

src/app/(home)/layout.tsx

@@ -12,6 +12,7 @@ export default async function HomeLayout({
 }) {
   return (
     <>
+      {/* @ts-expect-error RSC */}
       <Header />
       {children}
       <footer className="mt-10 font-medium border-t">