"use client"; import React, { useState, useEffect } from 'react'; import { FileType } from '@/types'; import { FileTypeDetector } from '@/lib/file-type-detector'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { Badge } from '@/components/ui/badge'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Checkbox } from '@/components/ui/checkbox'; import { FileText, // Code, // Image, // Settings, Sparkles, Copy } from 'lucide-react'; export interface CreateFileDialogProps { open: boolean; onOpenChange: (open: boolean) => void; onFileCreate: (fileData: { name: string; content: string; type: FileType; parentFolderId?: string; }) => void; parentFolderId?: string | null; } const FILE_TEMPLATES: Record = { html: ` Document

Hello World

`, css: `/* CSS Styles */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f5f5f5; } .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }`, js: `// JavaScript console.log('Hello World'); function greet(name) { return \`Hello, \${name}!\`; } // Example usage const message = greet('World'); console.log(message);`, ts: `// TypeScript interface User { id: number; name: string; email: string; } function greetUser(user: User): string { return \`Hello, \${user.name}!\`; } // Example usage const user: User = { id: 1, name: 'John Doe', email: 'john@example.com' }; console.log(greetUser(user));`, jsx: `import React from 'react'; function Component() { return (

Hello World

This is a React component.

); } export default Component;`, tsx: `import React from 'react'; interface Props { title: string; children?: React.ReactNode; } const Component: React.FC = ({ title, children }) => { return (

{title}

{children}
); }; export default Component;`, vue: ` `, json: `{ "name": "example", "version": "1.0.0", "description": "Example JSON file", "main": "index.js", "scripts": { "start": "node index.js" }, "keywords": [], "author": "", "license": "MIT" }`, md: `# Document Title ## Introduction This is a markdown document. ## Features - **Bold text** - *Italic text* - [Links](https://example.com) - \`Code snippets\` ## Code Example \`\`\`javascript console.log('Hello World'); \`\`\` ## Conclusion Thank you for reading!`, txt: '', py: `#!/usr/bin/env python3 """ Python script example """ def greet(name: str) -> str: """Greet a person by name.""" return f"Hello, {name}!" def main(): """Main function.""" message = greet("World") print(message) if __name__ == "__main__": main()`, php: ``, xml: ` Example This is an example XML file `, svg: ` `, yaml: `# YAML configuration file name: example version: 1.0.0 description: Example YAML file database: host: localhost port: 5432 name: mydb features: - authentication - logging - caching`, yml: `# YAML configuration file name: example version: 1.0.0 description: Example YAML file database: host: localhost port: 5432 name: mydb features: - authentication - logging - caching`, png: '', jpg: '', jpeg: '', gif: '', ico: '', webp: '', pdf: '' }; export function CreateFileDialog({ open, onOpenChange, onFileCreate, parentFolderId }: CreateFileDialogProps) { const [fileName, setFileName] = useState(''); const [fileType, setFileType] = useState('html'); const [content, setContent] = useState(''); const [useTemplate, setUseTemplate] = useState(true); const [isCreating, setIsCreating] = useState(false); // Reset form when dialog opens useEffect(() => { if (open) { setFileName(''); setFileType('html'); setContent(''); setUseTemplate(true); } }, [open]); // Update content when file type or template preference changes useEffect(() => { if (useTemplate && FILE_TEMPLATES[fileType]) { setContent(FILE_TEMPLATES[fileType]); } else if (!useTemplate) { setContent(''); } }, [fileType, useTemplate]); // Auto-detect file type from name useEffect(() => { if (fileName) { const detectedType = FileTypeDetector.detectFileType('', fileName); if (detectedType !== 'txt') { setFileType(detectedType); } } }, [fileName]); const handleCreate = async () => { if (!fileName.trim()) { return; } setIsCreating(true); try { onFileCreate({ name: fileName.trim(), content, type: fileType, parentFolderId: parentFolderId || undefined }); onOpenChange(false); } catch (error) { console.error('Error creating file:', error); } finally { setIsCreating(false); } }; const getFileTypeCategories = () => { return FileTypeDetector.getTypesByCategory(); }; const getFileIcon = (type: FileType) => { return FileTypeDetector.getFileIcon(type); }; const generateFileName = () => { const extensions: Record = { html: '.html', css: '.css', js: '.js', ts: '.ts', jsx: '.jsx', tsx: '.tsx', vue: '.vue', json: '.json', md: '.md', txt: '.txt', py: '.py', php: '.php', xml: '.xml', svg: '.svg', yaml: '.yaml', yml: '.yml', png: '.png', jpg: '.jpg', jpeg: '.jpeg', gif: '.gif', ico: '.ico', webp: '.webp', pdf: '.pdf' }; const baseName = fileType === 'html' ? 'index' : fileType === 'css' ? 'style' : fileType === 'js' ? 'script' : fileType === 'md' ? 'README' : 'untitled'; setFileName(baseName + extensions[fileType]); }; return ( Create New File Create a new file in your project {parentFolderId && " in the selected folder"}. Basic Advanced {/* File Name */}
setFileName(e.target.value)} className="flex-1" />
{/* File Type */}
{/* Template Option */}
setUseTemplate(checked as boolean)} /> {useTemplate && ( Template available )}
{/* Content Editor */}