Create email template UI feat-Super-admin-feature-team-cyborgs

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

@@ -0,0 +1,41 @@
+import { EllipsisVertical } from "lucide-react";
+
+const index = async () => {
+  return (
+    <div className="mt-8">
+      <div className="mt-4 flex w-full items-center justify-center bg-[#FFF7F2] p-4 text-base font-normal">
+        <div className="flex w-[30%] items-center gap-1">
+          <input type="checkbox" />
+          <h4>Name</h4>
+        </div>
+        <h4 className="w-[30%] text-center">Type</h4>
+        <h4 className="w-[30%] text-center">Created Date</h4>
+        <h4 className="w-[30%] text-center">Status</h4>
+        <h4 className="w-[10%] text-center">Action</h4>
+      </div>
+
+      <div className="mt-4 flex w-full items-center border-b-2 border-border p-4 text-sm font-medium">
+        <div className="flex w-[30%] items-center gap-1">
+          <input type="checkbox" />
+          <h4>The Lemonade blender</h4>
+        </div>
+        <h4 className="w-[30%] text-center">Product</h4>
+        <h4 className="w-[30%] text-center">01-01-24</h4>
+        <h4 className="w-[30%] text-center">
+          <span className="w-fit rounded-xl bg-red-200 px-8 py-1 text-center text-white">
+            Offline
+          </span>
+        </h4>
+        <h4 className="flex w-[10%] justify-center text-center">
+          <button>
+            <span className="">
+              <EllipsisVertical />
+            </span>
+          </button>
+        </h4>
+      </div>
+    </div>
+  );
+};
+
+export default index;

src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import {
+  Check,
+  // ChevronLeft,
+  // ChevronRight,
+  CirclePlus,
+  Filter,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+// import { Button } from "~/components/ui/button";
+import { Button } from "~/components/common/common-button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Input } from "~/components/ui/input";
+
+// import {
+//   Pagination,
+//   PaginationContent,
+//   PaginationEllipsis,
+//   PaginationItem,
+//   PaginationLink,
+// } from "~/components/ui/pagination";
+
+interface FilterDataProperties {
+  title: string;
+  selected: boolean;
+}
+
+const filterData: FilterDataProperties[] = [
+  {
+    title: "Active",
+    selected: false,
+  },
+
+  {
+    title: "Inactive",
+    selected: false,
+  },
+];
+
+const Menu = () => {
+  const [selectedFilter, setSelectedFilter] = useState<
+    FilterDataProperties | undefined
+  >();
+
+  const router = useRouter();
+
+  return (
+    <section className="float-end mt-8 pr-6">
+      <div className="">
+        <div className="flex flex-col gap-3 md:flex-row md:items-center">
+          <div className="flex flex-row items-center gap-3">
+            <div>
+              <Input
+                id="squeezeEmail"
+                type="email"
+                placeholder="Search option..."
+                className="col-span-3 inline-flex h-11 items-start justify-start gap-2"
+              />
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="lg"
+                  className="bg-white px-3 py-2 duration-300 ease-in"
+                  variant="outline"
+                >
+                  <div className="flex flex-row items-center gap-2">
+                    <Filter size={16} color="#525252" />
+                    <div className="text-base font-normal leading-5">
+                      Filter
+                    </div>
+                  </div>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {filterData.map((data, index) => {
+                  const { selected, title } = data;
+
+                  selectedFilter?.title === title
+                    ? (data.selected = true)
+                    : (data.selected = false);
+
+                  return (
+                    <DropdownMenuItem
+                      onClick={() => setSelectedFilter(filterData[index])}
+                      key={index}
+                    >
+                      <div className="flex w-full items-center">
+                        <div className="mr-auto">{title}</div>
+
+                        <Check
+                          size={16}
+                          color="#09090b"
+                          className={`${selected ? "opacity-100" : "opacity-0"}`}
+                        />
+                      </div>
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <div>
+              <Button
+                onClick={() => router.push("./email/new-template")}
+                className="inline-flex h-10 items-center justify-center bg-primary"
+              >
+                <CirclePlus />
+                Create new Template
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Menu;

src/app/dashboard/(admin)/admin/email/new-template/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import uploadImage from "@/../../public/images/upload-image.png";
+import {
+  AlignCenter,
+  AlignLeft,
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  ItalicIcon,
+  Link,
+  ListOrdered,
+  Pen,
+  StrikethroughIcon,
+} from "lucide-react";
+import Image from "next/image";
+import { useRef, useState } from "react";
+
+import { Button } from "~/components/common/common-button";
+
+const NewTemplate = () => {
+  const fileUploaderReference = useRef<HTMLInputElement | null>(null);
+  const [picture, setPicture] = useState<string>("");
+
+  const savePicture = () => {
+    if (
+      fileUploaderReference.current !== null &&
+      fileUploaderReference.current.files !== null
+    ) {
+      const uploadedFile = fileUploaderReference.current?.files[0];
+      const cachedURL = URL?.createObjectURL(uploadedFile);
+      setPicture(cachedURL);
+    }
+  };
+
+  const handleImageUpload = () => {
+    if (fileUploaderReference.current !== null) {
+      fileUploaderReference.current.click();
+    }
+  };
+
+  return (
+    <div className="h-auto md:flex">
+      <div className="m-auto w-full md:w-[512px]">
+        <h3>Template name</h3>
+        <form className="bg-white p-8">
+          <input
+            type="text"
+            placeholder="Title"
+            className="borde-0 h-12 w-full px-4 text-2xl outline-none placeholder:text-2xl"
+          />
+          <div className="mt-4 flex w-full bg-[#F4F4F4] py-14">
+            <input
+              onChange={savePicture}
+              ref={fileUploaderReference}
+              hidden
+              type="file"
+              name=""
+              id=""
+            />
+            <button onClick={handleImageUpload} className="m-auto">
+              <Image src={uploadImage} alt="upload button" />
+            </button>
+          </div>
+          <div className="mt-4">
+            <div className="mb-4 flex items-center justify-between gap-2 text-xs text-gray-500">
+              <Bold />
+              <ItalicIcon />
+              <StrikethroughIcon /> |
+              <Heading1 />
+              <Heading2 />
+              <Heading3 /> |
+              <Pen />
+              <Code />
+              <Link />
+              <AlignLeft />
+              <AlignCenter />
+              <ListOrdered /> |
+            </div>
+            <textarea
+              name=""
+              id=""
+              className="h-52 w-full resize-none border border-border outline-none"
+            ></textarea>
+            <Image src={picture} alt="ccccc" />
+          </div>
+          <div className="mt-4 flex justify-end gap-2">
+            <Button className="inline-flex h-10 items-center justify-center bg-primary">
+              Save Template
+            </Button>
+            <Button className="inline-flex h-10 items-center justify-center bg-background text-black">
+              Clear
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default NewTemplate;