fix: edit page and layout with related components

src/app/[locale]/(unauth)/layout.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 
-import LocaleSwitcher from '@/components/LocaleSwitcher';
+import LocaleSwitcher from '@/components/widget/LocaleSwitcher';
 import { BaseTemplate } from '@/templates/BaseTemplate';
 
 export default function Layout(props: { children: React.ReactNode }) {
@@ -10,48 +10,14 @@ export default function Layout(props: { children: React.ReactNode }) {
   return (
     <BaseTemplate
       leftNav={
-        <>
-          <li>
-            <Link
-              href="/"
-              className="border-none text-gray-700 hover:text-gray-900"
-            >
-              {t('home_link')}
-            </Link>
-          </li>
-          <li>
-            <Link
-              href="/about/"
-              className="border-none text-gray-700 hover:text-gray-900"
-            >
-              {t('about_link')}
-            </Link>
-          </li>
-          <li>
-            <Link
-              href="/portfolio/"
-              className="border-none text-gray-700 hover:text-gray-900"
-            >
-              {t('portfolio_link')}
-            </Link>
-          </li>
-          <li>
-            <a
-              className="border-none text-gray-700 hover:text-gray-900"
-              href="https://github.com/resatyildiz"
-            >
-              GitHub
-            </a>
-          </li>
-          <li>
-            <a
-              className="border-none text-gray-700 hover:text-gray-900"
-              href="https://www.linkedin.com/in/resatyildiz/"
-            >
-              LinkedIn
-            </a>
-          </li>
-        </>
+        <li>
+          <Link
+            href="/"
+            className="border-none text-gray-700 hover:text-gray-900"
+          >
+            {t('home_link')}
+          </Link>
+        </li>
       }
       rightNav={
         <li>

src/app/[locale]/(unauth)/page.test.tsx

@@ -5,17 +5,17 @@ import messages from '@/locales/en.json';
 
 import Index from './page';
 
-describe('Index page', () => {
+describe('Index page for EN', () => {
   describe('Render method', () => {
-    it('should have h1 tag', () => {
+    it('should have h1 tag in en locale', () => {
       render(
         <NextIntlClientProvider locale="en" messages={messages}>
           <Index />
         </NextIntlClientProvider>,
       );
 
       const heading = screen.getByRole('heading', {
-        name: /Boilerplate Code/,
+        name: 'Who am I?',
       });
 
       expect(heading).toBeInTheDocument();

src/app/[locale]/(unauth)/page.tsx

@@ -1,6 +1,8 @@
+import { Github, Linkedin, SunMedium, Twitter } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 
-import { Sponsors } from '@/components/Sponsors';
+import LinkBox from '@/components/ui/LinkBox';
 
 export async function generateMetadata(props: { params: { locale: string } }) {
   const t = await getTranslations({
@@ -15,92 +17,47 @@ export async function generateMetadata(props: { params: { locale: string } }) {
 }
 
 export default function Index() {
+  const t = useTranslations('About');
+  const rootT = useTranslations('RootLayout');
+
   return (
     <>
-      <p>
-        Explore our GitHub project for more information about{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://github.com/ixartz/Next-js-Boilerplate"
-        >
-          Next.js Boilerplate
-        </a>
-        .
-      </p>
-      <p>
-        Follow{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://twitter.com/ixartz"
-          target="_blank"
-        >
-          @Ixartz on Twitter
-        </a>{' '}
-        for updates and more information about the boilerplate.
-      </p>
-      <p>
-        Our sponsors&apos; exceptional support has made this project possible.
-        Their services integrate seamlessly with the boilerplate, and we
-        recommend trying them out.
-      </p>
-      <h2 className="mt-5 text-2xl font-bold">Sponsors</h2>
-      <Sponsors />
-      <h2 className="mt-5 text-2xl font-bold">
-        Boilerplate Code for Your Next.js Project with Tailwind CSS
-      </h2>
-      <p className="text-base">
-        <span role="img" aria-label="rocket">
-          🚀
-        </span>{' '}
-        Next.js Boilerplate is a developer-friendly starter code for Next.js
-        projects, built with Tailwind CSS, and TypeScript.{' '}
-        <span role="img" aria-label="zap">
-          ⚡️
-        </span>{' '}
-        Made with developer experience first: Next.js, TypeScript, ESLint,
-        Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode,
-        PostCSS, Tailwind CSS, Authentication with{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://clerk.com?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=nextjs-boilerplate"
-          target="_blank"
-        >
-          Clerk
-        </a>
-        , Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://turso.tech/?utm_source=nextjsstarterbp"
-          target="_blank"
-        >
-          Turso
-        </a>
-        , Error Monitoring with{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://sentry.io/for/nextjs/?utm_source=github&amp;utm_medium=paid-community&amp;utm_campaign=general-fy25q1-nextjs&amp;utm_content=github-banner-nextjsboilerplate-logo"
-          target="_blank"
-        >
-          Sentry
-        </a>
-        , Logging with Pino.js and Log Management with{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://betterstack.com/?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=next-js-boilerplate"
-          target="_blank"
-        >
-          Better Stack
-        </a>
-        , Monitoring as Code with{' '}
-        <a
-          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
-          href="https://www.checklyhq.com/?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=next-js-boilerplate"
-          target="_blank"
-        >
-          Checkly
-        </a>
-        , Storybook, Multi-language (i18n), and more.
-      </p>
+      <h3 className="mt-5 text-2xl font-bold">{t('meta_title')}</h3>-
+      <p className="text-base">{t('about_paragraph')}</p>
+      <hr className="my-5" />
+      <h5 className="mb-4 text-sm font-semibold">{rootT('some_links')}</h5>
+      <div>
+        <div className="grid grid-cols-12 gap-4">
+          <LinkBox
+            title="Github"
+            href="https://github.com/resatyildiz"
+            icon={<Github />}
+            className="col-span-8"
+          />
+          <LinkBox className="col-span-4" bgImage />
+          <LinkBox className="col-span-5" bgImage />
+          <LinkBox
+            title="LinkedIn"
+            href="https://www.linkedin.com/in/resatyildiz/"
+            icon={<Linkedin />}
+            className="col-span-7"
+          />
+          <LinkBox
+            title="Medium"
+            href="https://medium.com/@resatyildiz"
+            icon={<SunMedium />}
+            className="col-span-6"
+          />
+          <LinkBox className="col-span-6" bgImage />
+          <LinkBox className="col-span-3" bgImage />
+          <LinkBox
+            title="Twitter"
+            href="https://twitter.com/resat_dev"
+            icon={<Twitter />}
+            className="col-span-9"
+          />
+        </div>
+      </div>
     </>
   );
 }

src/components/widget/LocaleSwitcher.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useLocale } from 'next-intl';
+
+import { usePathname, useRouter } from '@/libs/i18nNavigation';
+import { AppConfig } from '@/utils/AppConfig';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../ui/DropdownMenu';
+
+export default function LocaleSwitcher() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const locale = useLocale();
+
+  const handleClick = (val: string | number) => {
+    router.push(pathname, { locale: val as string });
+    router.refresh();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <div className="rounded-lg border border-gray-100 px-4 py-1 text-sm transition-all hover:border-gray-200">
+          {locale.toUpperCase()}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {AppConfig.locales.map((item) => (
+          <DropdownMenuItem key={item} onClick={() => handleClick(item)}>
+            {item.toUpperCase()}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

tests/e2e/Navigation.spec.ts

@@ -8,23 +8,11 @@ test.describe('Navigation', () => {
 
       await expect(
         page.getByRole('heading', {
-          name: 'Boilerplate Code for Your Next.js Project with Tailwind CSS',
+          name: 'Who am I?',
         }),
       ).toBeVisible();
 
       await percySnapshot(page, 'Homepage');
     });
-
-    test('should take screenshot of the about page', async ({ page }) => {
-      await page.goto('/about');
-
-      await expect(
-        page.getByRole('link', {
-          name: 'About',
-        }),
-      ).toBeVisible();
-
-      await percySnapshot(page, 'About');
-    });
   });
 });