generated from muhtadeetaron/nextjs-template
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
"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;
|