From aea6743f551382dfebc70215ea522af33278d533 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Fri, 22 Sep 2023 15:42:16 +0800 Subject: [PATCH] feat: replace SiteHeaderLink with common Tabs --- src/components/dashboard/SettingsLayout.tsx | 5 ++- src/components/home/HomeActivitiesTabs.tsx | 5 --- src/components/site/SiteHeader.tsx | 30 ++++++++-------- src/components/site/SiteHeaderLink.tsx | 38 --------------------- src/components/ui/Tabs.tsx | 18 ++++++++-- src/css/tailwind.css | 19 ----------- 6 files changed, 33 insertions(+), 82 deletions(-) delete mode 100644 src/components/site/SiteHeaderLink.tsx diff --git a/src/components/dashboard/SettingsLayout.tsx b/src/components/dashboard/SettingsLayout.tsx index 9c4d1389..8e0b5609 100644 --- a/src/components/dashboard/SettingsLayout.tsx +++ b/src/components/dashboard/SettingsLayout.tsx @@ -1,4 +1,4 @@ -import { useParams, usePathname } from "next/navigation" +import { useParams } from "next/navigation" import React from "react" import { useXSettingsModal } from "@crossbell/connect-kit" @@ -18,7 +18,6 @@ export const SettingsLayout = ({ const { t } = useTranslation("dashboard") const xSettingsModal = useXSettingsModal() - const pathname = usePathname() const params = useParams() const subdomain = params?.subdomain as string const tabItems: TabItem[] = [ @@ -45,7 +44,7 @@ export const SettingsLayout = ({ text: "Export data", href: `https://export.crossbell.io/?handle=${subdomain}`, }, - ].map((item) => ({ ...item, active: pathname === item.href })) + ] return ( diff --git a/src/components/home/HomeActivitiesTabs.tsx b/src/components/home/HomeActivitiesTabs.tsx index a3aa48b9..beb4bd45 100644 --- a/src/components/home/HomeActivitiesTabs.tsx +++ b/src/components/home/HomeActivitiesTabs.tsx @@ -18,22 +18,18 @@ export const HomeActivitiesTabs = () => { { text: "Featured", href: "/", - active: pathname === "/", }, { text: "Shorts", href: "/shorts", - active: pathname === "/shorts", }, { text: "Latest", href: "/latest", - active: pathname === "/latest", }, { text: "Hottest", href: "/hottest", - active: pathname === "/hottest", }, { text: "Following", @@ -43,7 +39,6 @@ export const HomeActivitiesTabs = () => { ...topics.map((topic) => ({ text: t(topic.name), href: `/topic/${encodeURIComponent(topic.name)}`, - active: pathname === `/topic/${encodeURIComponent(topic.name)}`, })), ] diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx index c51fc3b6..aead458d 100644 --- a/src/components/site/SiteHeader.tsx +++ b/src/components/site/SiteHeader.tsx @@ -3,6 +3,7 @@ import NextImage from "next/image" import { FollowingButton } from "~/components/common/FollowingButton" import { FollowingCount } from "~/components/common/FollowingCount" import { PatronButton } from "~/components/common/PatronButton" +import { type TabItem, Tabs } from "~/components/ui/Tabs" import getQueryClient from "~/lib/query-client" import { cn } from "~/lib/utils" import { fetchGetSite } from "~/queries/site.server" @@ -10,7 +11,6 @@ import { fetchGetSite } from "~/queries/site.server" import { ConnectButton } from "../common/ConnectButton" import { Avatar } from "../ui/Avatar" import ConnectedAccounts from "./ConnectedAccounts" -import { HeaderLink, type HeaderLinkType } from "./SiteHeaderLink" import { SiteHeaderMenu } from "./SiteHeaderMenu" export const SiteHeader = async ({ @@ -26,14 +26,17 @@ export const SiteHeader = async ({ const queryClient = getQueryClient() const site = await fetchGetSite(handle, queryClient) - const leftLinks: HeaderLinkType[] = site?.metadata?.content?.navigation?.find( - (nav) => nav.url === "/", - ) - ? site.metadata?.content?.navigation - : [ - { label: "Home", url: "/" }, - ...(site?.metadata?.content?.navigation || []), - ] + const leftLinks: TabItem[] = ( + site?.metadata?.content?.navigation?.find((nav) => nav.url === "/") + ? site.metadata?.content?.navigation + : [ + { label: "Home", url: "/" }, + ...(site?.metadata?.content?.navigation || []), + ] + ).map((tab) => ({ + text: tab.label, + href: tab.url, + })) return (
@@ -126,11 +129,10 @@ export const SiteHeader = async ({ {!hideNavigation && (
-
- {leftLinks.map((link, i) => { - return - })} -
+
diff --git a/src/components/site/SiteHeaderLink.tsx b/src/components/site/SiteHeaderLink.tsx deleted file mode 100644 index 5373aeca..00000000 --- a/src/components/site/SiteHeaderLink.tsx +++ /dev/null @@ -1,38 +0,0 @@ -"use client" - -import { usePathname } from "next/navigation" - -import { getSiteRelativeUrl } from "~/lib/helpers" -import { useTranslation } from "~/lib/i18n/client" -import { cn } from "~/lib/utils" - -import { UniLink } from "../ui/UniLink" - -export type HeaderLinkType = { - icon?: React.ReactNode - label: string - url?: string - onClick?: () => void -} - -export const HeaderLink = ({ link }: { link: HeaderLinkType }) => { - const pathname = usePathname() - const { t } = useTranslation("site") - if (link.url) { - link.url = getSiteRelativeUrl(pathname, link.url) - } - - const active = pathname === link.url - return ( - - {link.icon && {link.icon}} - {t(link.label)} - - ) -} diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx index 1d7564d9..5e5a83f4 100644 --- a/src/components/ui/Tabs.tsx +++ b/src/components/ui/Tabs.tsx @@ -1,3 +1,6 @@ +"use client" + +import { usePathname } from "next/navigation" import React from "react" import { Tooltip } from "~/components/ui/Tooltip" @@ -23,6 +26,14 @@ export const Tabs = ({ className?: string }) => { const { t } = useTranslation("dashboard") + const pathname = usePathname() + + items = items.map((item) => { + if (item.href) { + item.active = pathname === item.href + } + return item + }) return (
{item.tooltip ? ( diff --git a/src/css/tailwind.css b/src/css/tailwind.css index ad6d1592..28a61e91 100644 --- a/src/css/tailwind.css +++ b/src/css/tailwind.css @@ -414,25 +414,6 @@ textarea.input { line-height: unset; } -.xlog-site-navigation-item { - @apply h-10 px-2 flex items-center space-x-1 transition-colors focus-ring; - @apply hover:text-gray-700; - - /* The underline */ - @apply relative; - @apply after:absolute after:block after:content-[''] after:h-[2px] after:transition-[left,right] after:bottom-0 after:left-1/2 after:right-1/2 after:bg-gray-700; - @apply hover:after:left-2 hover:after:right-2; -} - -/* TODO-Doma */ -/* Maybe use CSS nested syntax */ -.xlog-site-navigation-item-active { - @apply text-accent hover:text-accent; - - /* The underline */ - @apply after:left-2 after:right-2 after:bg-accent; -} - /* For users to use within posts */ .center { @apply flex justify-center;