frontend/components/import-dropdown.tsx

74 lines
2.2 KiB
TypeScript

"use client";
import type React from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { AlertCircle, Download, FileUp } from "lucide-react";
import { useAuth } from "@/contexts/auth-context";
import { MangaDexImportDialog } from "@/components/manga-dex-import-dialog";
import { MangaManualImportDialog } from "@/components/manga-manual-import-dialog";
import Link from "next/link";
export function ImportDropdown() {
const { isAuthenticated } = useAuth();
const [mangaDexDialogOpen, setMangaDexDialogOpen] = useState(false);
const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
if (!isAuthenticated) {
return null;
}
return (
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="sm" className="gap-2 bg-transparent">
<Download className="h-4 w-4" />
Import
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="">
<DropdownMenuItem onClick={() => setMangaDexDialogOpen(true)}>
<Download className="mr-2 h-4 w-4" />
Import from MangaDex
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setFileImportDialogOpen(true)}>
<FileUp className="mr-2 h-4 w-4" />
Import from File
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link
href="/import-review"
className="cursor-pointer gap-2 text-amber-600 dark:text-amber-500"
>
<AlertCircle className="h-4 w-4" />
<span>Import Review</span>
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<MangaDexImportDialog
mangaDexDialogOpen={mangaDexDialogOpen}
onMangaDexDialogOpenChange={setMangaDexDialogOpen}
/>
<MangaManualImportDialog
fileImportDialogOpen={fileImportDialogOpen}
onFileImportDialogOpenChange={setFileImportDialogOpen}
/>
</>
);
}