JavaScript 56.7%
TypeScript 42.6%
1"use client";23import { useState } from "react";4import { FolderPlus } from "lucide-react";5import Modal from "../ui/Modal";6import Button from "../ui/Button";7import toast from "react-hot-toast";8import { notifyFoldersChanged } from "../files/dnd";910interface CreateFolderModalProps {11 isOpen: boolean;12 onClose: () => void;13 parentId: string | null;14 onCreated: () => void;15}1617export default function CreateFolderModal({ isOpen, onClose, parentId, onCreated }: CreateFolderModalProps) {18 const [name, setName] = useState("");19 const [loading, setLoading] = useState(false);2021 const handleCreate = async () => {22 if (!name.trim() || loading) return;23 setLoading(true);24 try {25 const res = await fetch("/api/folders", {26 method: "POST",27 headers: { "Content-Type": "application/json" },28 body: JSON.stringify({ name: name.trim(), parentId: parentId || "root" }),29 });30 if (res.ok) {31 toast.success("Dossier créé");32 setName("");33 notifyFoldersChanged();34 onCreated();35 onClose();36 } else {37 const data = await res.json().catch(() => ({}));38 toast.error(data.error || "Erreur");39 }40 } catch {41 toast.error("Erreur réseau");42 } finally {43 setLoading(false);44 }45 };4647 return (48 <Modal isOpen={isOpen} onClose={onClose} title="Nouveau dossier" description={parentId ? "Créé dans le dossier courant" : "Créé à la racine"}>49 <div className="relative mb-4">50 <FolderPlus className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500 pointer-events-none" />51 <input52 type="text"53 value={name}54 onChange={(e) => setName(e.target.value)}55 placeholder="Nom du dossier"56 className="field pl-10 h-11"57 autoFocus58 onKeyDown={(e) => e.key === "Enter" && handleCreate()}59 />60 </div>61 <div className="flex gap-2 justify-end">62 <Button variant="ghost" onClick={onClose}>Annuler</Button>63 <Button variant="accent" onClick={handleCreate} loading={loading} disabled={!name.trim()}>64 <FolderPlus className="w-4 h-4" /> Créer65 </Button>66 </div>67 </Modal>68 );69}70