Feat/hng 4 super admin email template table

app/components/TemplateListItem.tsx

@@ -0,0 +1,39 @@
+interface TemplateListItemProperty {
+  templateImage: string;
+  templateName: string;
+  isPreviewActive: boolean;
+  onPreview: () => void;
+}
+
+export default function TemplateListItem({
+  templateImage,
+  templateName,
+  isPreviewActive,
+  onPreview,
+}: TemplateListItemProperty) {
+  return (
+    <div className="flex w-full max-w-full items-center border-b border-gray-300 py-4 pl-4 pr-8 md:max-w-3xl md:py-8 md:pl-10 md:pr-16">
+      <div className="w-8 flex-shrink-0 sm:w-24 md:w-32">
+        <img
+          src={templateImage}
+          alt="template preview"
+          className="h-auto w-full"
+        />
+      </div>
+      <p className="mx-5 flex-1 text-[12px] text-gray-700 sm:text-[14px] md:mx-8 md:text-[16px]">
+        {templateName}
+      </p>
+      <div className="flex gap-x-8">
+        <button
+          className={`${
+            isPreviewActive ? "text-orange-500" : "text-black"
+          } text-[12px]`}
+          onClick={onPreview}
+        >
+          Preview
+        </button>
+        <p className="text-[12px]">Edit</p>
+      </div>
+    </div>
+  );
+}

app/components/TemplateListPagination.tsx

@@ -0,0 +1,58 @@
+interface TemplateListPaginationProperty {
+  currentPage: number;
+  totalPages: number;
+  handleEachPageClick: (pageNumber: number) => void;
+  handleNext: () => void;
+  handlePrev: () => void;
+}
+
+export default function TemplateListPagination({
+  currentPage,
+  totalPages,
+  handleEachPageClick,
+  handleNext,
+  handlePrev,
+}: TemplateListPaginationProperty) {
+  const startPage = Math.max(1, currentPage - 2);
+  const endPage = Math.min(totalPages, startPage + 4);
+
+  const pageNumbers = [];
+  for (let index = startPage; index <= endPage; index++) {
+    pageNumbers.push(index);
+  }
+
+  return (
+    <div className="flex w-full max-w-full flex-col flex-wrap items-center justify-between rounded-b-[19px] bg-[#F8F8F8] px-[24px] py-[16px] sm:flex-row md:max-w-3xl">
+      <p className="mb-4 sm:mb-0">{`Page ${currentPage} of ${totalPages}`}</p>
+      <div className="mb-4 flex space-x-2 sm:mb-0">
+        {pageNumbers.map((pageNumber) => (
+          <button
+            key={pageNumber}
+            onClick={() => handleEachPageClick(pageNumber)}
+            className={`flex h-[30px] w-[30px] items-center justify-center rounded-[6px] p-[10px] sm:h-[36px] sm:w-[36px] sm:text-[14px] ${
+              pageNumber === currentPage
+                ? "border-[1px] border-[#F97316] bg-[#FFECE5] text-[#344054]"
+                : "bg-white text-[#98A2B3]"
+            }`}
+          >
+            {pageNumber}
+          </button>
+        ))}
+      </div>
+      <div className="flex space-x-2">
+        <button
+          onClick={handlePrev}
+          className="flex h-[30px] w-[30px] items-center justify-center rounded-[6px] border-[1px] border-[#E2E8F0] bg-white p-[10px] sm:h-[36px] sm:w-[36px] sm:text-[14px]"
+        >
+          <img src="/prevArrow.svg" alt="Previous" />
+        </button>
+        <button
+          onClick={handleNext}
+          className="flex h-[30px] w-[30px] items-center justify-center rounded-[6px] border-[1px] border-[#E2E8F0] bg-white p-[10px] sm:h-[36px] sm:w-[36px] sm:text-[14px]"
+        >
+          <img src="/nextArrow.svg" alt="Next" />
+        </button>
+      </div>
+    </div>
+  );
+}

app/components/TemplateListTable.tsx

@@ -0,0 +1,214 @@
+import { useState } from "react";
+
+import TemplateListItem from "./TemplateListItem";
+import TemplateListPagination from "./TemplateListPagination";
+
+const templates = [
+  {
+    id: 1,
+    templateImage: "/email-template-1.png",
+    templateName: "Welcome - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 2,
+    templateImage: "/email-template-2.png",
+    templateName: "Welcome - Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 3,
+    templateImage: "/email-template-3.png",
+    templateName: "Reset Password - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 4,
+    templateImage: "/email-template-4.png",
+    templateName: "Reset Password - Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 5,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 6,
+    templateImage: "/email-template-1.png",
+    templateName: "Welcome - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 7,
+    templateImage: "/email-template-2.png",
+    templateName: "Welcome - Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 8,
+    templateImage: "/email-template-3.png",
+    templateName: "Reset Password - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 9,
+    templateImage: "/email-template-4.png",
+    templateName: "Reset Password - Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 10,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 11,
+    templateImage: "/email-template-1.png",
+    templateName: "Welcome - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 12,
+    templateImage: "/email-template-2.png",
+    templateName: "Welcome - Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 13,
+    templateImage: "/email-template-3.png",
+    templateName: "Reset Password - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 14,
+    templateImage: "/email-template-4.png",
+    templateName: "Reset Password - Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 15,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 16,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 17,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 18,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 19,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 20,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+
+  {
+    id: 21,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 22,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 23,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+  {
+    id: 24,
+    templateImage: "/email-template-5.png",
+    templateName: "Password reset Complete - No Image",
+    isPreviewActive: false,
+  },
+];
+
+const TEMPLATES_PER_PAGE = 5;
+
+export default function TemplateListTable() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [templatesData, setTemplatesData] = useState(templates);
+
+  const totalPages = Math.ceil(templates.length / TEMPLATES_PER_PAGE);
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleEachPageClick = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
+
+  const handlePreview = (id: number) => {
+    setTemplatesData((previousTemplates) =>
+      previousTemplates.map((template) =>
+        template.id === id
+          ? { ...template, isPreviewActive: !template.isPreviewActive }
+          : { ...template, isPreviewActive: false },
+      ),
+    );
+  };
+
+  const startIndex = (currentPage - 1) * TEMPLATES_PER_PAGE;
+  const endIndex = startIndex + TEMPLATES_PER_PAGE;
+  const currentTemplates = templatesData.slice(startIndex, endIndex);
+
+  return (
+    <div className="border-[rgba(203, 213, 225, 0.60)] w-full max-w-full rounded-[19px] border-[1px] md:max-w-3xl">
+      <div>
+        {currentTemplates.map((template) => (
+          <TemplateListItem
+            key={template.id}
+            templateImage={template.templateImage}
+            templateName={template.templateName}
+            isPreviewActive={template.isPreviewActive}
+            onPreview={() => handlePreview(template.id)}
+          />
+        ))}
+      </div>
+      <TemplateListPagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        handleNext={handleNext}
+        handlePrev={handlePrevious}
+        handleEachPageClick={handleEachPageClick}
+      />
+    </div>
+  );
+}