examjam-frontend/torpedo/app/dashboard/email/page.tsx

"use client";

import { Avatar } from "@/components/ui/avatar";
import { AvatarImage } from "@radix-ui/react-avatar";
import { useSession } from "next-auth/react";
import { ContactSelector } from "@/components/dashboard/email/ContactSelector";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import Image from "next/image";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

import { Button } from "@/components/ui/button";
import RichTextEditor from "@/components/dashboard/email/RichTextEditor";
import { Eye, Send, FileBox, Check } from "lucide-react";
import ContactModal from "@/components/dashboard/email/ContactModal";

const page = () => {
  const { data: session } = useSession();

  return (
    <main className="px-4 py-6 border-white h-full flex flex-col gap-6">
      <header>
        <h1 className="font-bold text-5xl tracking-tighter text-white">
          Send an Email
        </h1>
      </header>
      <section className="flex gap-4">
        <section className="w-1/3 h-fit flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label>From</Label>
            <div className="flex justify-between w-full rounded-xl py-2 pl-2 pr-4 border-[1px] border-[#CBD5E1]">
              <div className="rounded-xl px-3 py-2 flex items-center gap-2 bg-[#3D3D3D] w-fit">
                <Avatar className="h-7 w-7">
                  <AvatarImage src={session?.user?.image!} />
                </Avatar>
                <h2 className="tracking-tight text-white text-sm font-semibold">
                  {session?.user?.email}
                </h2>
              </div>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger>
                    <Image
                      src="/icons/gmail.svg"
                      alt="gmail logo"
                      width={24}
                      height={24}
                    />
                  </TooltipTrigger>
                  <TooltipContent className="flex flex-col items-center font-semibold">
                    Currently logged in as:{" "}
                    <p className="font-normal"> {session?.user?.email}</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <Label>To</Label>
            <div className="flex items-center justify-between w-full rounded-xl p-2 border-[1px] border-[#CBD5E1]">
              <ContactSelector />
              <ContactModal />
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="subject">Subject</Label>
            <Input
              type="text"
              id="subject"
              placeholder="What's the email about?"
              className="w-full rounded-xl py-7 px-4 border-[1px] border-[#CBD5E1] bg-transparent"
            />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="subject">Attachments</Label>
            <div className="h-96 border-[1px] border-[#CBD5E1] rounded-xl"></div>
          </div>
        </section>
        <section className="w-2/3 flex flex-col gap-2">
          <Label>Body</Label>
          <RichTextEditor />
        </section>
      </section>
      <section className="flex justify-between">
        <div></div>
        <div className="flex gap-4">
          <Sheet>
            <SheetTrigger className="h-auto flex gap-2 justify-center rounded-lg text-sm items-center text-white w-40 bg-[#363636]">
              <Eye size={18} />
              Preview
            </SheetTrigger>
            <SheetContent className="bg-[#222222] flex flex-col gap-10">
              <SheetHeader>
                <SheetTitle className="text-4xl tracking-tighter">
                  Preview
                </SheetTitle>
                <SheetDescription>
                  This is what your email looks like.
                </SheetDescription>
              </SheetHeader>
              <section className="flex flex-col gap-4">
                <div className="flex flex-col gap-2">
                  <Label>From</Label>
                  <div className="flex justify-between w-full rounded-xl py-2 pl-2 pr-4 border-[1px] border-[#CBD5E1]">
                    <div className="rounded-xl px-3 py-2 flex items-center gap-2 w-fit">
                      <h2 className="tracking-tight text-white text-sm ">
                        {session?.user?.email}
                      </h2>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col gap-2">
                  <Label>To</Label>
                  <div className="flex justify-between w-full rounded-xl py-2 pl-2 pr-4 border-[1px] border-[#CBD5E1]">
                    <div className="rounded-xl px-3 py-2 flex items-center gap-2 w-fit">
                      <h2 className="tracking-tight text-white text-sm ">
                        alex.mason@gmail.com
                      </h2>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col gap-2">
                  <Label>Subject</Label>
                  <div className="flex justify-between w-full rounded-xl py-2 pl-2 pr-4 border-[1px] border-[#CBD5E1]">
                    <div className="rounded-xl px-3 py-2 flex items-center gap-2 w-fit">
                      <h2 className="tracking-tight text-white text-sm ">
                        Greetings for the new year!
                      </h2>
                    </div>
                  </div>
                </div>
                <div className="flex flex-col gap-2">
                  <Label>Body</Label>
                  <div className="flex justify-between w-full rounded-xl py-2 pl-2 pr-4 border-[1px] border-[#CBD5E1]">
                    <div className="rounded-xl px-3 py-2 flex items-center gap-2 w-fit">
                      <p className=" text-white text-sm">
                        Hello, Alex Merry Christmas and a Happy New Year to you
                        all Engineers. I’m glad to announce that we will be
                        arranging a Christmas party on the eve of Christmas. As
                        such, you are cordially invited to attend the party as
                        we will have loads of fun events like Dart, Mario Kart
                        and Beer Pong. Hope to see you at the party! Regards, HR
                      </p>
                    </div>
                  </div>
                </div>
              </section>
            </SheetContent>
          </Sheet>

          <Button className="flex gap-2 w-40 bg-[#2477FF] text-white">
            <Send size={18} />
            Send
          </Button>
        </div>
      </section>
    </main>
  );
};

export default page;