initial commit

torpedo/components/dashboard/email/ContactModal.tsx

@@ -0,0 +1,111 @@
+"use client";
+import React from "react";
+import { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Eye, Send, FileBox, Check, CircleUser } from "lucide-react";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+
+type CsvFile = {
+  name: string;
+  csvLink: string;
+};
+
+const ContactModal = () => {
+  const [csvFiles, setCsvFiles] = useState<CsvFile[]>([]);
+  console.log(csvFiles);
+
+  useEffect(() => {
+    const fetchCsvFiles = async () => {
+      try {
+        const response = await fetch("/api/fetchcsv");
+        if (!response.ok) {
+          throw new Error("Failed to fetch CSV files");
+        }
+        const data: CsvFile[] = await response.json();
+        setCsvFiles(data);
+      } catch (error) {
+        console.error("Error fetching CSV files:", error);
+      }
+    };
+
+    fetchCsvFiles();
+  }, []); // Only run on mount
+  return (
+    <div>
+      <Dialog>
+        <DialogTrigger className="px-4 bg-white text-black py-2 rounded-md">
+          <FileBox size={20} />
+        </DialogTrigger>
+        <DialogContent className="h-5/6 w-5/6 bg-[#222222]">
+          <DialogHeader>
+            <DialogTitle className="text-4xl tracking-tighter">
+              Select Contacts
+            </DialogTitle>
+            <DialogDescription>
+              Select a file to import contacts from.
+            </DialogDescription>
+          </DialogHeader>
+          <section className="flex gap-2">
+            <Select>
+              <SelectTrigger className="w-1/6 rounded-xl">
+                <SelectValue placeholder="Select Option" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="gsheets">
+                  <div className="flex items-center gap-1">
+                    <Image
+                      src="/icons/Sheets.svg"
+                      alt="Google Sheets Icon"
+                      width={20}
+                      height={20}
+                    />
+                    Google Sheets
+                  </div>
+                </SelectItem>
+                <SelectItem value="system">
+                  <div className="flex items-center gap-1">
+                    <CircleUser size={20} />
+                    Contact Manager
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Select>
+              <SelectTrigger className="w-4/6 rounded-xl">
+                <SelectValue placeholder="Select File (.csv, .tsv)" />
+              </SelectTrigger>
+              <SelectContent>
+                {csvFiles.map((file) => (
+                  <SelectItem key={file.name} value={file.name}>
+                    {file.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button className="bg-[#34A853] h-9 rounded-xl w-1/6 text-white flex gap-2">
+              <Check />
+              Select
+            </Button>
+          </section>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default ContactModal;