Skip to content

Commit

Permalink
Merge pull request #666 from taiwonaf/feat-Hgn-email-template
Browse files Browse the repository at this point in the history
Feat hgn email template
  • Loading branch information
Samadeen authored Jul 25, 2024
2 parents 9c3d7fd + 14b3e75 commit 844da6a
Show file tree
Hide file tree
Showing 10 changed files with 160 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const SectionHeader = () => {
return <div>section-header</div>;
};

export default SectionHeader;
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/navbar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
20 changes: 20 additions & 0 deletions src/hooks/use-generate-pagination.ts
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 844da6a

Please sign in to comment.