refactor: reduce the number of page components
This commit is contained in:
DIYgod
parent
930761fc7c
commit
f8b6a31087
|
|
@ -1,65 +0,0 @@
|
|||
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 { GITHUB_LINK } from "~/lib/env"
|
||||
import { useTranslation } from "~/lib/i18n"
|
||||
import { cn } from "~/lib/utils"
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
name: "Home",
|
||||
link: "/",
|
||||
},
|
||||
{
|
||||
name: "Activities",
|
||||
link: "/activities",
|
||||
},
|
||||
{
|
||||
name: (
|
||||
<Image
|
||||
className="no-optimization w-24"
|
||||
alt="github stars"
|
||||
src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
|
||||
/>
|
||||
),
|
||||
link: GITHUB_LINK,
|
||||
},
|
||||
]
|
||||
|
||||
export async function Header() {
|
||||
const { t } = await useTranslation("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">
|
||||
<UniLink href="/" className="text-2xl font-extrabold flex items-center">
|
||||
<div className="inline-block w-9 h-9 mr-3">
|
||||
<Logo type="lottie" width={36} height={36} autoplay={false} />
|
||||
</div>
|
||||
xLog
|
||||
</UniLink>
|
||||
<div className="space-x-14 text-zinc-500 flex">
|
||||
{tabs?.map((tab, index) => (
|
||||
<UniLink
|
||||
className={cn(
|
||||
"cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
|
||||
{
|
||||
"text-accent": pathname === tab.link,
|
||||
},
|
||||
)}
|
||||
key={tab.link}
|
||||
href={tab.link}
|
||||
>
|
||||
{typeof tab.name === "string" ? t(tab.name) : tab.name}
|
||||
</UniLink>
|
||||
))}
|
||||
<ConnectButton size="base" variantColor="black" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,12 +1,18 @@
|
|||
"use client"
|
||||
|
||||
import { FollowAllButton } from "~/components/common/FollowAllButton"
|
||||
import { useGetShowcase } from "~/queries/home"
|
||||
import { useState } from "react"
|
||||
|
||||
import ShowcaseList from "./ShowcaseList"
|
||||
import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
|
||||
import { FollowAllButton } from "~/components/common/FollowAllButton"
|
||||
import { Image } from "~/components/ui/Image"
|
||||
import { UniLink } from "~/components/ui/UniLink"
|
||||
import { getSiteLink } from "~/lib/helpers"
|
||||
import { useGetShowcase } from "~/queries/home"
|
||||
|
||||
export function ShowCase() {
|
||||
const showcaseSites = useGetShowcase()
|
||||
const [showcaseMore, setShowcaseMore] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<FollowAllButton
|
||||
|
|
@ -18,7 +24,56 @@ export function ShowCase() {
|
|||
.map(Number)}
|
||||
siteIds={showcaseSites.data?.map((s: { handle: string }) => s.handle)}
|
||||
/>
|
||||
<ShowcaseList sites={showcaseSites.data} />
|
||||
<ul
|
||||
className={`pt-10 grid grid-cols-2 md:grid-cols-3 gap-10 overflow-y-hidden relative text-left ${
|
||||
showcaseMore ? "" : "max-h-[540px]"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute bottom-0 h-20 left-0 right-0 bg-gradient-to-t from-white via-white flex items-end justify-center font-bold cursor-pointer ${
|
||||
showcaseMore ? "hidden" : ""
|
||||
}`}
|
||||
onClick={() => setShowcaseMore(true)}
|
||||
>
|
||||
{/* {t("Show more")} */}
|
||||
Show more
|
||||
</div>
|
||||
{showcaseSites.data?.map((site) => (
|
||||
<li className="inline-flex align-middle" key={site.handle}>
|
||||
<UniLink
|
||||
href={getSiteLink({
|
||||
subdomain: site.handle,
|
||||
})}
|
||||
className="inline-flex align-middle w-full"
|
||||
>
|
||||
<CharacterFloatCard siteId={site.handle}>
|
||||
<span className="w-14 h-14 inline-block">
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src={
|
||||
site.metadata?.content?.avatars?.[0] ||
|
||||
"ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa"
|
||||
}
|
||||
alt={site.handle}
|
||||
width="56"
|
||||
height="56"
|
||||
></Image>
|
||||
</span>
|
||||
</CharacterFloatCard>
|
||||
<span className="ml-3 min-w-0 flex-1 justify-center inline-flex flex-col">
|
||||
<span className="truncate w-full inline-block font-medium">
|
||||
{site.metadata?.content?.name}
|
||||
</span>
|
||||
{site.metadata?.content?.bio && (
|
||||
<span className="text-gray-500 text-xs truncate w-full inline-block mt-1">
|
||||
{site.metadata.content?.bio}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</UniLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
"use client"
|
||||
|
||||
import { CharacterEntity } from "crossbell.js"
|
||||
import { useState } from "react"
|
||||
|
||||
import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
|
||||
import { Image } from "~/components/ui/Image"
|
||||
import { UniLink } from "~/components/ui/UniLink"
|
||||
import { getSiteLink } from "~/lib/helpers"
|
||||
|
||||
export default function ShowcaseList({ sites }: { sites?: CharacterEntity[] }) {
|
||||
const [showcaseMore, setShowcaseMore] = useState(false)
|
||||
|
||||
return (
|
||||
<ul
|
||||
className={`pt-10 grid grid-cols-2 md:grid-cols-3 gap-10 overflow-y-hidden relative text-left ${
|
||||
showcaseMore ? "" : "max-h-[540px]"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute bottom-0 h-20 left-0 right-0 bg-gradient-to-t from-white via-white flex items-end justify-center font-bold cursor-pointer ${
|
||||
showcaseMore ? "hidden" : ""
|
||||
}`}
|
||||
onClick={() => setShowcaseMore(true)}
|
||||
>
|
||||
{/* {t("Show more")} */}
|
||||
Show more
|
||||
</div>
|
||||
{sites?.map((site) => (
|
||||
<li className="inline-flex align-middle" key={site.handle}>
|
||||
<UniLink
|
||||
href={getSiteLink({
|
||||
subdomain: site.handle,
|
||||
})}
|
||||
className="inline-flex align-middle w-full"
|
||||
>
|
||||
<CharacterFloatCard siteId={site.handle}>
|
||||
<span className="w-14 h-14 inline-block">
|
||||
<Image
|
||||
className="rounded-full"
|
||||
src={
|
||||
site.metadata?.content?.avatars?.[0] ||
|
||||
"ipfs://bafkreiabgixxp63pg64moxnsydz7hewmpdkxxi3kdsa4oqv4pb6qvwnmxa"
|
||||
}
|
||||
alt={site.handle}
|
||||
width="56"
|
||||
height="56"
|
||||
></Image>
|
||||
</span>
|
||||
</CharacterFloatCard>
|
||||
<span className="ml-3 min-w-0 flex-1 justify-center inline-flex flex-col">
|
||||
<span className="truncate w-full inline-block font-medium">
|
||||
{site.metadata?.content?.name}
|
||||
</span>
|
||||
{site.metadata?.content?.bio && (
|
||||
<span className="text-gray-500 text-xs truncate w-full inline-block mt-1">
|
||||
{site.metadata.content?.bio}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</UniLink>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,19 +1,73 @@
|
|||
import { ConnectButton } from "~/components/common/ConnectButton"
|
||||
import { DarkModeSwitch } from "~/components/common/DarkModeSwitch"
|
||||
import { Logo } from "~/components/common/Logo"
|
||||
import { Image } from "~/components/ui/Image"
|
||||
import { UniLink } from "~/components/ui/UniLink"
|
||||
import { APP_NAME, DISCORD_LINK, GITHUB_LINK, TWITTER_LINK } from "~/lib/env"
|
||||
import { getSiteLink } from "~/lib/helpers"
|
||||
import { useTranslation } from "~/lib/i18n"
|
||||
import { cn } from "~/lib/utils"
|
||||
|
||||
import { Header } from "./components/Header"
|
||||
const tabs = [
|
||||
{
|
||||
name: "Home",
|
||||
link: "/",
|
||||
},
|
||||
{
|
||||
name: "Activities",
|
||||
link: "/activities",
|
||||
},
|
||||
{
|
||||
name: (
|
||||
<Image
|
||||
className="no-optimization w-24"
|
||||
alt="github stars"
|
||||
src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
|
||||
/>
|
||||
),
|
||||
link: GITHUB_LINK,
|
||||
},
|
||||
]
|
||||
|
||||
export default async function HomeLayout({
|
||||
children,
|
||||
}: {
|
||||
children?: React.ReactNode
|
||||
}) {
|
||||
const { t } = await useTranslation("index")
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* @ts-expect-error RSC */}
|
||||
<Header />
|
||||
<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">
|
||||
<UniLink
|
||||
href="/"
|
||||
className="text-2xl font-extrabold flex items-center"
|
||||
>
|
||||
<div className="inline-block w-9 h-9 mr-3">
|
||||
<Logo type="lottie" width={36} height={36} autoplay={false} />
|
||||
</div>
|
||||
xLog
|
||||
</UniLink>
|
||||
<div className="space-x-14 text-zinc-500 flex">
|
||||
{tabs?.map((tab, index) => (
|
||||
<UniLink
|
||||
className={cn(
|
||||
"cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
|
||||
{
|
||||
"text-accent": "/" === tab.link,
|
||||
},
|
||||
)}
|
||||
key={tab.link}
|
||||
href={tab.link}
|
||||
>
|
||||
{typeof tab.name === "string" ? t(tab.name) : tab.name}
|
||||
</UniLink>
|
||||
))}
|
||||
<ConnectButton size="base" variantColor="black" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{children}
|
||||
<footer className="mt-10 font-medium border-t">
|
||||
<div className="max-w-screen-lg px-5 py-14 mx-auto flex justify-between">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
|
||||
export type UniLinkProps = {
|
||||
|
|
|
|||
Loading…
Reference in New Issue