initial commit for demo next js project

app/[lang]/dictionaries.js

@@ -0,0 +1,8 @@
+import "server-only";
+
+const dictionaries = {
+  en: () => import("../dictionaries/en.json").then((module) => module.default),
+  nl: () => import("../dictionaries/nl.json").then((module) => module.default),
+};
+
+export const getDictionary = async (locale) => dictionaries[locale]();

app/[language]/dashboard/@chart/Chart.js

@@ -0,0 +1,13 @@
+import Card from "../../../components/shared/Card";
+import { delay } from "../../../utils";
+
+export default async function Chart() {
+  await delay(10000);
+  return (
+    <div>
+      <Card className="bg-blue-700">
+        <h1>Chart</h1>
+      </Card>
+    </div>
+  );
+}

app/[language]/dashboard/@chart/default.js

@@ -0,0 +1,5 @@
+import Chart from "./Chart";
+
+export default function DefaultPage() {
+  return <Chart />;
+}

app/[language]/dashboard/@chart/loading.js

@@ -0,0 +1,11 @@
+import Card from "../../../components/shared/Card";
+
+export default function ChartLoading() {
+  return (
+    <div>
+      <Card className="bg-blue-700 animate-pulse ">
+        <h1>Loading</h1>
+      </Card>
+    </div>
+  );
+}

app/[language]/dashboard/@chart/page.js

@@ -0,0 +1 @@
+export { default } from "./Chart";

app/[language]/dashboard/@teams/(.)active/page.js

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div>
+      <h1>intercepted route</h1>
+    </div>
+  );
+}

app/[language]/dashboard/@teams/Teams.js

@@ -0,0 +1,15 @@
+import Link from "next/link";
+import Card from "../../../components/shared/Card";
+import { delay } from "../../../utils";
+
+export default async function Teams() {
+  await delay(2000);
+  return (
+    <div>
+      <Card className="bg-teal-600">
+        <h1>Teams</h1>
+        <Link href="/dashboard/active">Active</Link>
+      </Card>
+    </div>
+  );
+}

app/[language]/dashboard/@teams/active/Active.js

@@ -0,0 +1,15 @@
+import Link from "next/link";
+import Card from "../../../components/shared/Card";
+import { delay } from "../../../utils";
+
+export default async function Active() {
+  delay(5000);
+  return (
+    <div>
+      <Card className="bg-pink-700">
+        <h1>Active</h1>
+        <Link href="/dashboard">Teams</Link>
+      </Card>
+    </div>
+  );
+}

app/[language]/dashboard/@teams/active/loading.js

@@ -0,0 +1,11 @@
+import Card from "../../../components/shared/Card";
+
+export default function Loading() {
+  return (
+    <div>
+      <Card className="bg-pink-700 animate-pulse ">
+        <h1>Loading</h1>
+      </Card>
+    </div>
+  );
+}

app/[language]/dashboard/@teams/active/page.js

@@ -0,0 +1 @@
+export { default } from "./Active";

app/[language]/dashboard/@teams/default.js

@@ -0,0 +1,5 @@
+import Teams from "./Teams";
+
+export default function DefaultPage() {
+  return <Teams />;
+}

app/[language]/dashboard/@teams/loading.js

@@ -0,0 +1,11 @@
+import Card from "../../../components/shared/Card";
+
+export default function Loading() {
+  return (
+    <div>
+      <Card className="bg-teal-600 animate-pulse ">
+        <h1>Loading</h1>
+      </Card>
+    </div>
+  );
+}

app/[language]/dashboard/@teams/page.js

@@ -0,0 +1 @@
+export { default } from "./Teams";

app/[language]/dashboard/default.js

@@ -0,0 +1,7 @@
+export default function DefaultPage() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+    </div>
+  );
+}

app/[language]/dashboard/layout.js

@@ -0,0 +1,18 @@
+import SideBar from "../../components/shared/SideBar";
+
+export default function Layout({ children, teams, chart }) {
+  return (
+    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+      <div className="w-full flex-none md:w-64">
+        <SideBar />
+      </div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">
+        {children}
+        <div className="grid grid-col-2 gap-5">
+          <div>{teams}</div>
+          <div>{chart}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[language]/dashboard/loading.js

@@ -0,0 +1,11 @@
+import Card from "../../components/shared/Card";
+
+export default function ChartLoading() {
+  return (
+    <div>
+      <Card className="bg-blue-700 animate-pulse ">
+        <h1>Loading</h1>
+      </Card>
+    </div>
+  );
+}

app/[language]/dashboard/page.js

@@ -0,0 +1,10 @@
+import { getDictionary } from "../../[lang]/dictionaries.js";
+
+export default async function Page({ params: { language } }) {
+  const dict = await getDictionary(language);
+  return (
+    <div>
+      <h1>{dict.products.cart}</h1>{" "}
+    </div>
+  );
+}

app/api/comments.js

@@ -0,0 +1,5 @@
+import instance from "../utils/axios";
+
+export function fetchCommentsByPostId(postId) {
+  return instance.get(`/comments?postId=${postId}`);
+}

app/api/posts.js

@@ -0,0 +1,37 @@
+import instance from "../utils/axios";
+const ITEMS_PER_PAGE = 4;
+
+export function fetchFilteredPostsAndTotalCount(userId, currentPage, query) {
+  const offset = (currentPage - 1) * ITEMS_PER_PAGE;
+  const params = {
+    params: {
+      userId: userId,
+      _start: offset,
+      _limit: ITEMS_PER_PAGE,
+      q: query,
+    },
+  };
+
+  const paginatedPostsPromise = instance.get("/posts", params);
+  const allPostsPromise = instance.get("/posts", {
+    params: { userId: userId, q: query },
+  });
+
+  return Promise.all([paginatedPostsPromise, allPostsPromise]);
+}
+
+export function fetchPostById(id) {
+  return instance.get(`/posts/${id}`);
+}
+
+export function createPost(data) {
+  return instance.post("/posts", data);
+}
+
+export function editPost(id, data) {
+  return instance.put(`/posts/${id}`, data);
+}
+
+export function deletePost(id) {
+  return instance.delete(`/posts/${id}`);
+}

app/api/users.js

@@ -0,0 +1,21 @@
+import instance from "../utils/axios";
+
+export function fetchUsers(query) {
+  return instance.get(`/users?q=${query}`);
+}
+
+export function createUser(data) {
+  return instance.post("/users", data);
+}
+
+export function fetchUserById(id) {
+  return instance.get(`/users/${id}`);
+}
+
+export function editUser(id, data) {
+  return instance.put(`/users/${id}`, data);
+}
+
+export function deleteUser(id) {
+  return instance.delete(`/users/${id}`);
+}

app/components/fonts.js

@@ -0,0 +1,8 @@
+import { Inter } from "next/font/google";
+import { Lusitana } from "next/font/google";
+
+export const inter = Inter({ subsets: ["latin"] });
+export const lusitana = Lusitana({
+  subsets: ["latin"],
+  weight: ["700", "400"],
+});

app/components/logo.js

@@ -0,0 +1,13 @@
+import { GlobeAltIcon } from "@heroicons/react/24/outline";
+import { lusitana } from "./fonts";
+
+export default function AcmeLogo() {
+  return (
+    <div
+      className={`${lusitana.className} flex flex-row items-center leading-none text-white`}
+    >
+      <GlobeAltIcon className="h-12 w-12 rotate-[15deg]" />
+      <p className="text-[44px]">Demo</p>
+    </div>
+  );
+}

app/components/shared/Breadcrumbs.js

@@ -0,0 +1,26 @@
+import { clsx } from "clsx";
+import Link from "next/link";
+import { lusitana } from "../fonts";
+
+export default async function Breadcrumbs({ breadcrumbs }) {
+  return (
+    <nav aria-label="Breadcrumb" className="mb-6 block">
+      <ol className={clsx(lusitana.className, "flex text-xl md:text-2xl")}>
+        {breadcrumbs.map((breadcrumb, index) => (
+          <li
+            key={breadcrumb.href}
+            aria-current={breadcrumb.active}
+            className={clsx(
+              breadcrumb.active ? "text-gray-900" : "text-gray-500"
+            )}
+          >
+            <Link href={breadcrumb.href}>{breadcrumb.label}</Link>
+            {index < breadcrumbs.length - 1 ? (
+              <span className="mx-3 inline-block">/</span>
+            ) : null}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

app/components/shared/Button.js

@@ -0,0 +1,15 @@
+import clsx from "clsx";
+
+export function Button({ children, className, ...rest }) {
+  return (
+    <button
+      {...rest}
+      className={clsx(
+        "flex h-10 items-center rounded-lg bg-blue-500 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:bg-blue-600 aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+        className
+      )}
+    >
+      {children}
+    </button>
+  );
+}

app/components/shared/Card.js

@@ -0,0 +1,7 @@
+export default function Card({ children, className }) {
+  return (
+    <div className={`shadow-md rounded-lg p-6 ${className} text-white`}>
+      {children}
+    </div>
+  );
+}

src/app/testPage/error.js → app/components/shared/CustomError.js

@@ -1,20 +1,23 @@
 "use client";
 
 import { useEffect } from "react";
-
-export default function Error({ error, reset }) {
+import {
+  SOMETHING_WENT_WRONG,
+  TRY_AGAIN,
+} from "../../utils/constants/genericConstants";
+export default function CustomError({ error, reset }) {
   useEffect(() => {
     console.error(error);
   }, [error]);
 
   return (
     <main className="flex h-full flex-col items-center justify-center">
-      <h2 className="text-center">Something went wrong!</h2>
+      <h2 className="text-center">{SOMETHING_WENT_WRONG}</h2>
       <button
         className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400"
-        onClick={() => reset()}
+        onClick={reset}
       >
-        Try again
+        {TRY_AGAIN}
       </button>
     </main>
   );

app/components/shared/NavLinks.js

@@ -0,0 +1,50 @@
+"use client";
+
+import { UserGroupIcon, ChartPieIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import clsx from "clsx";
+import { USERS as USER_URL } from "../../utils/constants/urlConstants";
+import { USERS } from "../../users/constants";
+
+const links = [
+  {
+    name: "Dashboard",
+    href: "/dashboard",
+    icon: ChartPieIcon,
+  },
+  {
+    name: USERS,
+    href: USER_URL,
+    icon: UserGroupIcon,
+  },
+];
+
+export default function NavLinks() {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {links.map((link) => {
+        const LinkIcon = link.icon;
+        const isCurrentPage = `/${pathname.split("/")?.[1]}` === link.href;
+
+        return (
+          <Link
+            key={link.name}
+            href={link.href}
+            className={clsx(
+              "flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3",
+              {
+                "bg-sky-100 text-blue-600": isCurrentPage,
+              }
+            )}
+          >
+            <LinkIcon className="w-6" />
+            <p className="hidden md:block">{link.name}</p>
+          </Link>
+        );
+      })}
+    </>
+  );
+}