From c923fd485774c13390c2aff07c56b90ec93ff998 Mon Sep 17 00:00:00 2001 From: Matthew Ameh Date: Tue, 30 Jul 2024 00:33:27 +0100 Subject: [PATCH 1/2] modal --- public/images/icon.png | Bin 0 -> 1622 bytes .../_components/Input.tsx | 34 +++++++ .../_components/Modal.tsx | 63 +++++++++++++ .../manage-template/ManageTemplate.tsx | 87 ++++++++++++++++++ 4 files changed, 184 insertions(+) create mode 100644 public/images/icon.png create mode 100644 src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/Input.tsx create mode 100644 src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/Modal.tsx create mode 100644 src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/manage-template/ManageTemplate.tsx diff --git a/public/images/icon.png b/public/images/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..20824019a39eb7d9609955e3611d4e186041b0ea GIT binary patch literal 1622 zcmV-c2C4apP)}XWirD??+Ms!6MaPTO;rWtM<}d zBk@+tOja99o@wiW-qrF>*E{ywNF(%8BXlkS1c`*iR;%@((h!B%5FBCGLS9ApU0(y> zN>-PknU>QKna2`)zu7_BRi{k;~kN9MB$G^B95j^NMUq8 zc62{}($%)^$8+6}6Y;=1BJH#QhLq@!?Ykk?QCSpEydu(?7!SId>FM-DNH7-{7yrpB zDo=fyCSDP#61!OH_3>{ZrGT0~mTun`#Y?1~0^Zmkp9(1jYp#J`#RD&q8vbot4Ql(4 z7i9S1+Zz_t{2=i_kqv<&8v;c(1d4136xk3cvLR4pL-2y3E_r(Tf^}8dLn`{PO6e5u}q6?J5X(K9p zpc4PWx<+SE-b9GDB{89*BneWvNHj5ImE)QDChJ-np^M57k|33fEGun9 zPst-JEh^iR7?q1GD{aK0GSh-4%+Hb-m5VGhZA1@-%>K>fGW%jUwK{>xoes++hKT%% zr3&pxAh|BRnIuN#BHgu7m+vG1>kL3tXQ6jC)sYz5k?13x<90K2yNM?n(XQDsl?16= zB%;SPJ$!p+>;ULv9it(VAW`(}sK}3EQK>^yg>GcAyO|#B*JOvZq7aFw)JXcnejV&8 zGj}r)MnY!jca=nmX7mH&i5oIMYw2(6rGY?w?g@tIrnuO9lEXlDpl=CNFp zqfNd-bm{^n-$q1K&a04z=8aa$a8Pyg@98NXweFd|ep}X5D?UV>Mdwg)mG#v0dc6-e z-r3G2fMxm`YS}orIwp5n02PDu6QrE9(E|lZT7JRp_T%vw=_n`Yptnj| zrUgx*&qbS1Wl)QVtOC@EW!1@m)A^-}8*TfXMIYW9>30UYghbT3k%n@x&Iv~37V;7i zg}Yw+tR3s*4GtNZ6uH5s#G=>ds$^1Rj!=n?Dr8cmQI|17%A`dOmu}_)FiL6SZV_!0p5?QrG$3A2xBQh3=j!l`l zEI==k5E+|9$A-+H+W{LdGFFL>4Vm6FT4d}J9r?SieQB)7x=3`W$cY5dNRf4uSO$#~ znW99{D3Pg31dS1yvP94bk*P}rwHHZ=D{3v05}&E9NJ@N3Ek#n|x71D~C2pryA}R6v z)J7yF{+L>bq{P>WUL+;%M${rHad)B>Nr}aXQY0l7CpwXo=!dV!FUv2NFg0hMlqI%W zt+uUx6%Tx$dY)lv&*>s zp{Ptsd@o) => void; + type?: string; + placeholder?: string; +} + +const Input: React.FC = ({ + label, + value, + onChange, + type = "text", + placeholder, +}) => { + return ( +
+ + +
+ ); +}; + +export default Input; diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/Modal.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/Modal.tsx new file mode 100644 index 000000000..d1e775259 --- /dev/null +++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/Modal.tsx @@ -0,0 +1,63 @@ +"use client"; + +import React, { ChangeEvent, useState } from "react"; + +import Input from "./Input"; + +interface InputProperties { + label: string; + value: string; + onChange: (event: ChangeEvent) => void; + placeholder: string; +} + +interface ModalProperties { + inputs: InputProperties[]; + buttonText?: string; +} + +const Modal: React.FC = ({ inputs, buttonText = "Save" }) => { + const initialFormValues: { [key: string]: string } = {}; + for (const input of inputs) { + initialFormValues[input.label] = ""; + } + + const [formValues, setFormValues] = useState<{ [key: string]: string }>( + initialFormValues, + ); + + const handleChange = + (label: string) => (event: ChangeEvent) => { + setFormValues((previousValues) => ({ + ...previousValues, + [label]: event.target.value, + })); + }; + + return ( +
+
+
+
+ {inputs.map((input) => ( + + ))} +
+
+
+
+ +
+
+ ); +}; + +export default Modal; diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/manage-template/ManageTemplate.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/manage-template/ManageTemplate.tsx new file mode 100644 index 000000000..01dd691fb --- /dev/null +++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/manage-template/ManageTemplate.tsx @@ -0,0 +1,87 @@ +"use client"; + +import { LucideProps } from "lucide-react"; +import Link from "next/link"; +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"; + +interface IOption { + data: { + title: string; + description: string; + icon: ForwardRefExoticComponent< + Omit & React.RefAttributes + >; + link: string; + }; +} + +export const Options: FC = ({ data }) => { + return ( + +
+ +
+
+

+ {data.title} +

+

{data.description}

+
+ + ); +}; +const ManageTemplate = () => { + const isloading: boolean = false; + const data = 100; + const [togglePreview, setTogglePreview] = useState(false); + const [currentPage, setCurrentPage] = useState(1); + const totalPage = Math.ceil(data / 10); + return ( +
+
+ + +
+
+
+
+
+ +
+ +
+
+ {togglePreview && } +
+
+ ); +}; + +export default ManageTemplate; From 49dde83f1a3125177b660750c88e6dd3fee41296 Mon Sep 17 00:00:00 2001 From: Matthew Ameh Date: Tue, 30 Jul 2024 01:18:00 +0100 Subject: [PATCH 2/2] add logo --- .../_components/AddLogo.tsx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx diff --git a/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx new file mode 100644 index 000000000..77a457a6b --- /dev/null +++ b/src/app/dashboard/(admin)/admin/email/edit-in-buit-templates/_components/AddLogo.tsx @@ -0,0 +1,49 @@ +"use client"; + +import Image from "next/image"; +import React, { useState } from "react"; + +const AddLogo: React.FC = () => { + const [selectedImage, setSelectedImage] = useState< + string | ArrayBuffer | undefined + >(); + + const handleImageChange = (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onloadend = () => { + setSelectedImage(reader.result ?? undefined); + }; + reader.readAsDataURL(file); + } + }; + + return ( +
+ +
+ ); +}; + +export default AddLogo;