refactor navigation and locales

Author: eezhal92

src/app/[locale]/layout.tsx

@@ -4,7 +4,7 @@ import { getMessages, getTranslations, unstable_setRequestLocale } from "next-in
 import { Sora } from "next/font/google";
 import "./globals.css";
 import WrapperLayout from "@/components/layout/WrapperLayout";
-import { locales } from "@/lib/config";
+import { locales } from "@/lib/locales";
 import { notFound } from "next/navigation";
 const sora = Sora({ subsets: ["latin"] });
 

src/app/[locale]/page.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { HomePage } from "@/features/home";
-import { locales } from "@/lib/config";
+import { locales } from "@/lib/locales";
 import { unstable_setRequestLocale } from "next-intl/server";
 import { notFound } from "next/navigation";
 

src/app/page.tsx

@@ -1,7 +1,7 @@
 import { unstable_setRequestLocale } from "next-intl/server";
 import { redirect } from "@/lib/navigation";
 import { notFound } from "next/navigation";
-import { locales } from "@/lib/config";
+import { locales } from "@/lib/locales";
 
 type Props = {
   params: {

src/components/common/LocaleToggle/index.tsx

@@ -1,7 +1,6 @@
 import { useTransition } from "react";
 import { useLocale } from "next-intl";
 import { useParams } from "next/navigation";
-
 import { usePathname, useRouter } from "@/lib/navigation";
 import { Locale } from "@/lib/i18n";
 import { Button } from "@/components/ui/Button";

src/components/common/footer/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { dataFooter } from "./constants";
-import { Link } from "@/lib/navigation";
 import { Button } from "@/components/ui/Button";
 import { useTranslations } from "next-intl";
+import { Link } from "@/lib/navigation";
 
 const Footer = () => {
   const date = new Date();

src/components/common/navbar/NavItem.tsx

@@ -5,10 +5,10 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/Sheet";
-import NavItem from "../Navbar/NavItem";
+import NavLink from "../../../lib/navigation/NavLink";
 import { ThemeToggle } from "../ThemeToggle";
 import LocaleToggle from "../LocaleToggle";
-import { LINKS } from "../Navbar/constant";
+import { LINKS } from "../../layout/Navbar/constant";
 
 const Sidebar: FC = () => {
   const t = useTranslations("Layout");
@@ -29,7 +29,7 @@ const Sidebar: FC = () => {
           <SheetDescription>
             <nav className="flex flex-col items-center gap-4 mt-2">
               {LINKS.map(({ href, id }) => (
-                <NavItem key={id} href={href} title={t(`navbar.link-${id}`)} onClick={() => setIsOpen(false)} />
+                <NavLink key={id} href={href} title={t(`navbar.link-${id}`)} onClick={() => setIsOpen(false)} />
               ))}
               <div className="flex gap-2 items-center">
                 <ThemeToggle />

src/components/common/navbar/constant.ts

@@ -0,0 +1,13 @@
+import { NavLinkProps } from "../../../lib/navigation/NavLink";
+import { ValidPathnames } from "../../../lib/navigation/types";
+
+export const LINKS: NavLinkProps<ValidPathnames>[] = [
+  {
+    id: "1",
+    href: "/about",
+  },
+  {
+    id: "2",
+    href: "/events",
+  },
+];

src/components/common/sidebar/index.tsx

@@ -1,10 +1,10 @@
 import { Link } from "@/lib/navigation";
-import NavItem from "./NavItem";
-import { ThemeToggle } from "../ThemeToggle";
+import NavLink from "../../../lib/navigation/NavLink";
+import { ThemeToggle } from "../../common/ThemeToggle";
 import { useTranslations } from "next-intl";
-import LocaleToggle from "../LocaleToggle";
+import LocaleToggle from "../../common/LocaleToggle";
 import { LINKS } from "./constant";
-import Sidebar from "../Sidebar";
+import Sidebar from "../../common/Sidebar";
 import AnnouncementLayout from "@/components/layout/AnnouncementLayout";
 
 const Navbar = () => {
@@ -21,7 +21,7 @@ const Navbar = () => {
 
             <nav className="lg:flex items-center gap-7 hidden">
               {LINKS.map(({ href, id }) => (
-                <NavItem key={id} href={href} title={t(`navbar.link-${id}`)} />
+                <NavLink key={id} href={href} title={t(`navbar.link-${id}`)} />
               ))}
               <div className="flex gap-2 items-center">
                 <ThemeToggle />

src/components/layout/Navbar/constant.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import Navbar from "@/components/common/Navbar";
+import Navbar from "@/components/layout/Navbar";
 import { ThemeProvider } from "./ThemeProvider";
 import Footer from "@/components/common/Footer";
 import { useParams, usePathname } from "next/navigation";

src/components/common/navbar/index.tsx src/components/layout/Navbar/index.tsx

@@ -6,7 +6,7 @@ import { eventsService } from "@/services/events";
 import EventCardV2 from "./components/EventCardV2";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/Select";
 import { TechEvent } from "./types";
-import { eventsData } from "./constants";
+import { mockEvents } from "./constants";
 
 const EventListPage = () => {
   const t = useTranslations("EventsPage");
@@ -56,7 +56,7 @@ const EventListPage = () => {
               <EventCardV2 data={event} />
             </Link>
           ))}
-          {eventsData.map((event) => (
+          {mockEvents.map((event) => (
             <Link key={event.id} href={`/events/${event.id}`}>
               <EventCardV2 data={event} />
             </Link>

src/components/layout/WrapperLayout/index.tsx

@@ -7,7 +7,7 @@ import {
   BreadcrumbLink,
   BreadcrumbSeparator,
 } from "@/components/ui/Breadcrumb";
-import { LINKS } from "@/components/common/Navbar/constant";
+import { LINKS } from "@/components/layout/Navbar/constant";
 
 const EventBreadcrumbs = () => {
   const t = useTranslations("Layout");

src/features/events/EventListPage.tsx

@@ -1,7 +1,7 @@
 import { CalendarRange, Clock, MapPin } from "lucide-react";
 import { EventInfoType, TechEvent } from "./types";
 
-export const eventsData: TechEvent[] = [
+export const mockEvents: TechEvent[] = [
   {
     id: 1,
     title: "Advanced Frontend Workshop",

src/features/events/components/EventBreadcrumb.tsx

@@ -2,7 +2,7 @@
 
 import { notFound } from "next/navigation";
 import { getRequestConfig } from "next-intl/server";
-import { locales } from "./config";
+import { locales } from "./locales";
 
 export type Locale = (typeof locales)[number];
 

src/features/events/constants.tsx

@@ -0,0 +1,4 @@
+export const defaultLocale = "id" as const;
+export const locales = ["en", "id"] as const;
+
+export type Locales = typeof locales;

src/lib/i18n.ts

@@ -0,0 +1,15 @@
+import { Link } from "@/lib/navigation";
+import { ComponentProps } from "react";
+import { pathnames } from "@/lib/navigation/config";
+
+export type NavLinkProps<Pathname extends keyof typeof pathnames> = ComponentProps<typeof Link<Pathname>>;
+
+function NavLink<Pathname extends keyof typeof pathnames>({ href, onClick, ...rest }: NavLinkProps<Pathname>) {
+  return (
+    <Link href={href} onClick={onClick}>
+      <span>{rest.title}</span>
+    </Link>
+  );
+}
+
+export default NavLink;

src/lib/locales.ts

@@ -1,9 +1,5 @@
 import { Pathnames, LocalePrefix } from "next-intl/routing";
-
-export const defaultLocale = "id" as const;
-export const locales = ["en", "id"] as const;
-
-export type Locales = typeof locales;
+import { Locales } from "../locales";
 
 export const pathnames: Pathnames<Locales> = {
   "/": "/",

src/lib/navigation/NavLink.tsx

@@ -1,7 +1,12 @@
 import { createLocalizedPathnamesNavigation } from "next-intl/navigation";
-import { locales, pathnames, localePrefix } from "./config";
+import { pathnames, localePrefix } from "./config";
+import { locales } from "../locales";
+
 export const { Link, getPathname, redirect, usePathname, useRouter } = createLocalizedPathnamesNavigation({
   locales,
   pathnames,
   localePrefix,
 });
+
+export { default as NavLink } from "./NavLink";
+export * from "./types";

src/lib/config.ts src/lib/navigation/config.ts

@@ -1,4 +1,4 @@
-import { pathnames } from "@/lib/config";
+import { pathnames } from "@/lib/navigation/config";
 
 export type PathnamesKeys = keyof typeof pathnames;
 export type PathnameValues = {