update AccountTabs component to improve content's rendering

bigcommerce · Apr 8, 2024 · efb999d · efb999d
1 parent 3a9812d
commit efb999d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/apps/core/app/[locale]/(default)/account/[tab]/_components/account-tabs.tsx b/apps/core/app/[locale]/(default)/account/[tab]/_components/account-tabs.tsx
@@ -1,10 +1,11 @@
 'use client';
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bigcommerce/components/tabs';
-import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { PropsWithChildren } from 'react';
 
+import { Link } from '~/components/link';
+
 import { TabType } from '../layout';
 
 interface Props extends PropsWithChildren {
@@ -13,15 +14,16 @@ interface Props extends PropsWithChildren {
 }
 
 export const AccountTabs = ({ children, activeTab, tabs }: Props) => {
-  const router = useRouter();
   const t = useTranslations('Account.Home');
 
   return (
     <Tabs activationMode="manual" defaultValue={activeTab}>
       <TabsList aria-label={t('accountTabsLabel')}>
         {tabs.map((tab) => (
-          <TabsTrigger key={tab} onClick={() => router.replace(`/account/${tab}`)} value={tab}>
-            {tab === 'recently-viewed' ? t('recentlyViewed') : t(tab)}
+          <TabsTrigger asChild key={tab} value={tab}>
+            <Link href={`/account/${tab}`} prefetch="viewport" prefetchKind="full">
+              {tab === 'recently-viewed' ? t('recentlyViewed') : t(tab)}
+            </Link>
           </TabsTrigger>
         ))}
       </TabsList>

diff --git a/apps/core/app/[locale]/(default)/account/[tab]/layout.tsx b/apps/core/app/[locale]/(default)/account/[tab]/layout.tsx
@@ -1,5 +1,5 @@
-import { NextIntlClientProvider, useMessages } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { NextIntlClientProvider } from 'next-intl';
+import { getMessages, getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
 
 import { LocaleType } from '~/i18n';
@@ -21,13 +21,16 @@ interface Props extends PropsWithChildren {
   params: { locale: LocaleType; tab?: TabType };
 }
 
-export default function AccountTabLayout({ children, params: { locale, tab } }: Props) {
+export default async function AccountTabLayout({ children, params: { locale, tab } }: Props) {
   unstable_setRequestLocale(locale);
 
-  const messages = useMessages();
+  const t = await getTranslations({ locale, namespace: 'Account.Home' });
+
+  const messages = await getMessages();
 
   return (
     <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
+      <h1 className="my-6 my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
       <AccountTabs activeTab={tab} tabs={[...tabList]}>
         {children}
       </AccountTabs>

diff --git a/apps/core/app/[locale]/(default)/account/[tab]/page.tsx b/apps/core/app/[locale]/(default)/account/[tab]/page.tsx
@@ -24,7 +24,7 @@ export async function generateMetadata({ params: { tab, locale } }: Props): Prom
 const tabHeading = async (heading: string, locale: LocaleType) => {
   const t = await getTranslations({ locale, namespace: 'Account.Home' });
 
-  return <h2 className="mb-8 text-4xl font-black lg:text-5xl">{t(heading)}</h2>;
+  return <h2 className="mb-8 text-3xl font-black lg:text-5xl">{t(heading)}</h2>;
 };
 
 export default async function AccountTabPage({ params: { tab, locale } }: Props) {