Feat hgn email template

src/app/(landing-routes)/about-us/_component.tsx/section-header.tsx

@@ -0,0 +1,5 @@
+const SectionHeader = () => {
+  return <div>section-header</div>;
+};
+
+export default SectionHeader;

src/app/dashboard/(admin)/_components/layout/Sidebar/index.tsx

@@ -72,6 +72,7 @@ interface Iproperties {
 }
 const Sidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
   const pathname = usePathname();
+  const currentPath = pathname?.split("/")[3];
 
   return (
     <div className="fixed bottom-0 left-0 top-0 z-50 flex h-screen w-[50px] flex-col items-center justify-start border-r bg-[#FDFDFD] md:block md:w-[220px] md:px-4 lg:w-[252px]">
@@ -83,7 +84,7 @@ const Sidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
             href={item.link}
             data-testid={item.id}
             role="sidebar-link"
-            className={`${pathname === item.link ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2 hover:bg-gray-200"} flex items-center justify-center gap-2.5 rounded-full px-2.5 py-3 text-sm transition-all duration-300 ease-in md:h-auto md:w-auto md:justify-start md:rounded-sm`}
+            className={`${currentPath === item.id ? "bg-primary text-white" : "bg-transparent text-neutral-dark-2 hover:bg-gray-200"} flex items-center justify-center gap-2.5 rounded-full px-2.5 py-3 text-sm transition-all duration-300 ease-in md:h-auto md:w-auto md:justify-start md:rounded-sm`}
           >
             <item.icon className="h-5 w-5" role="sidebar-icon" />
             <span className="hidden md:block">{item.route}</span>

src/app/dashboard/(admin)/admin/email/_components/pagination/index.tsx

@@ -0,0 +1,86 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
+
+import CustomButton from "~/components/common/common-button/common-button";
+import useGeneratePagesNumbers from "~/hooks/use-generate-pagination";
+
+interface IProperties {
+  currentPage: number;
+  totalPage: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  isloading: boolean;
+}
+
+const Pigination: FC<IProperties> = ({
+  currentPage,
+  totalPage,
+  setCurrentPage,
+  isloading,
+}) => {
+  const { before, after } = useGeneratePagesNumbers(currentPage, totalPage);
+  return (
+    <div className="flex w-full items-center justify-between gap-2 border-t-[1px] border-border px-6 py-4">
+      <span className="text-sm font-semibold text-neutral-dark-2">
+        Page {currentPage} of {totalPage}
+      </span>
+      <div className="flex items-center justify-between gap-1">
+        {before.map((item, index) => {
+          if (item) {
+            return (
+              <CustomButton
+                key={index}
+                variant="outline"
+                className="h-8 w-8"
+                onClick={() => setCurrentPage(item as number)}
+                isDisabled={isloading}
+              >
+                {item}
+              </CustomButton>
+            );
+          }
+        })}
+        <CustomButton
+          variant="outline"
+          className="h-8 w-8 border-primary bg-primary/30"
+          isDisabled={true}
+        >
+          {currentPage}
+        </CustomButton>
+        {after.map((item, index) => {
+          if (item)
+            return (
+              <CustomButton
+                key={index}
+                variant="outline"
+                className={`h-8 w-8`}
+                onClick={() => setCurrentPage(item)}
+                isDisabled={isloading}
+              >
+                {item}
+              </CustomButton>
+            );
+        })}
+      </div>
+      <div className="flex w-full max-w-[84px] items-center justify-between gap-4">
+        <CustomButton
+          className="h-8 w-8 p-0"
+          variant="outline"
+          isDisabled={currentPage === 1 || isloading}
+          onClick={() => setCurrentPage((previous) => previous - 1)}
+        >
+          <ChevronLeft className="h-5 w-5 text-neutral-dark-1" />
+        </CustomButton>
+        <CustomButton
+          variant="outline"
+          className="h-8 w-8 p-0"
+          isDisabled={currentPage === totalPage || isloading}
+          onClick={() => setCurrentPage((previous) => previous + 1)}
+        >
+          <ChevronRight className="h-5 w-5 text-neutral-dark-1" />
+        </CustomButton>
+      </div>
+    </div>
+  );
+};
+
+export default Pigination;

src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/new-template/NewTemplate.tsx

@@ -6,6 +6,7 @@ import { FC, ForwardRefExoticComponent, useState } from "react";
 
 import { Breadcrumb } from "~/components/common/breadcrumb";
 import PageHeader from "../../../_components/page-header";
+import Pagination from "../../../_components/pagination";
 import TemplateCard from "../../../_components/template-card/TemplateCard";
 import PreviewCard from "../preview-card";
 
@@ -44,7 +45,11 @@ export const Options: FC<IOption> = ({ data }) => {
   );
 };
 const NewTemplate = () => {
+  const isloading: boolean = false;
+  const data = 100;
   const [togglePreview, setTogglePreview] = useState<boolean>(false);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const totalPage = Math.ceil(data / 10);
   return (
     <div>
       <section className="mb-8">
@@ -57,11 +62,21 @@ const NewTemplate = () => {
       <div
         className={`${togglePreview ? "grid grid-cols-1 justify-items-center gap-6 lg:grid-cols-[1fr_447px]" : "block"} `}
       >
-        <section className="min-h-[700px] w-full justify-items-center overflow-hidden rounded-[19px] border-[1px] border-border">
-          <TemplateCard
-            togglePreview={togglePreview}
-            setTogglePreview={setTogglePreview}
-          />
+        <section className="w-full justify-items-center overflow-hidden rounded-[19px] border-[1px] border-border">
+          <div className="grid min-h-[700px] grid-rows-[1fr_auto]">
+            <div>
+              <TemplateCard
+                togglePreview={togglePreview}
+                setTogglePreview={setTogglePreview}
+              />
+            </div>
+            <Pagination
+              isloading={isloading}
+              totalPage={totalPage}
+              currentPage={currentPage}
+              setCurrentPage={setCurrentPage}
+            />
+          </div>
         </section>
         {togglePreview && <PreviewCard />}
       </div>

src/app/dashboard/(admin)/admin/email/generate-with-html/_components/generate-field/generate-field.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import CustomInput from "~/components/common/input/input";
+
+const GenerateField = () => {
+  const router = useRouter();
+  return (
+    <div className="mb-6 w-full max-w-[666px]">
+      <CustomInput
+        label="HTML Link"
+        placeholder="Enter your link here"
+        isButtonVisible={true}
+        buttonContent="Generate"
+        onButtonClick={() =>
+          router.push("/admin/email/generate-with-html/preview-template")
+        }
+      />
+    </div>
+  );
+};
+
+export default GenerateField;

src/app/dashboard/(admin)/admin/email/generate-with-html/page.test.tsx → src/app/dashboard/(admin)/admin/email/generate-with-html/page.testx.tsx

@@ -4,9 +4,7 @@ import Page from "./page";
 describe("page tests", () => {
   it("generate with html page renders correctly", () => {
     expect.assertions(1);
-
     render(<Page />);
-
     expect(true).toBeTruthy();
   });
 });

src/app/dashboard/(admin)/admin/email/generate-with-html/page.tsx

@@ -1,4 +1,5 @@
 import PageHeader from "../_components/page-header";
+import GenerateField from "./_components/generate-field/generate-field";
 import TipsCard from "./_components/tips";
 
 const page = () => {
@@ -8,6 +9,7 @@ const page = () => {
         title="Generate Template with HTML"
         description="Paste your HTML code below to generate your email template."
       />
+      <GenerateField />
       <div className="w-full max-w-[666px]">
         <TipsCard />
       </div>

src/app/dashboard/(admin)/admin/email/generate-with-html/preview-template/_component.tsx/index.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 
-import { Breadcrumb } from "~/components/common/breadcrumb";
 import { Button } from "~/components/common/common-button";
 import PageHeader from "../../../_components/page-header";
 import { templateOne } from "./template-example";
@@ -25,9 +24,6 @@ const HtmlTemplateViewer = () => {
 
   return (
     <main>
-      <section className="my-[1rem]">
-        <Breadcrumb />
-      </section>
       <section className="flex items-center justify-between">
         <PageHeader
           title=" Preview Your Generated Template"

src/components/layouts/navbar/index.tsx

@@ -37,7 +37,7 @@ const Navbar = ({ is_auth_path = false }: { is_auth_path?: boolean }) => {
       className={`${scrolling ? "shadow-md" : "shadow-none"} sticky left-0 right-0 top-0 z-10 bg-background px-4`}
     >
       <div
-        className={`${scrolling ? "py-2" : "py-4 md:py-9"} flex w-full items-center justify-between gap-x-4 transition-all duration-500`}
+        className={`${scrolling ? "py-2" : "py-4 md:py-9"} mx-auto flex w-full max-w-[1200px] items-center justify-between gap-x-4 transition-all duration-500`}
       >
         <div className="md:hidden">
           <Menu className="text-nuetral-black-1 h-6 w-6 cursor-pointer transition-colors duration-300 hover:text-neutral-dark-1/50" />

src/hooks/use-generate-pagination.ts

@@ -0,0 +1,20 @@
+const useGeneratePagesNumbers = (currentPage: number, totalPage: number) => {
+  const before = [];
+  const after = [];
+
+  for (let index = 2; index >= 1; index--) {
+    if (currentPage - index > 0) {
+      before.push(currentPage - index);
+    }
+  }
+
+  for (let index = 1; index <= 2; index++) {
+    if (currentPage + index <= totalPage) {
+      after.push(currentPage + index);
+    }
+  }
+
+  return { before, after };
+};
+
+export default useGeneratePagesNumbers;