File size: 6,174 Bytes
171eb01 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import React, { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Upload, FileText, X } from 'lucide-react';
import { motion } from 'framer-motion';
const InputSection = ({ onAnalyze }) => {
const [text, setText] = useState('');
const [activeTab, setActiveTab] = useState('text');
const [file, setFile] = useState(null);
const onDrop = useCallback((acceptedFiles) => {
if (acceptedFiles?.length > 0) {
setFile(acceptedFiles[0]);
}
}, []);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop,
accept: { 'text/plain': ['.txt'], 'application/pdf': ['.pdf'] },
maxFiles: 1
});
const handleAnalyze = () => {
if (activeTab === 'text' && text.trim()) {
onAnalyze({ type: 'text', content: text });
} else if (activeTab === 'file' && file) {
onAnalyze({ type: 'file', content: file });
}
};
return (
<div
// Forced styling to ensure width works even if Tailwind has issues
style={{ width: '90vw', maxWidth: '1200px', margin: '0 auto', display: 'flex', flexDirection: 'column' }}
className="neu-panel p-8 md:p-12 mb-12"
>
<div className="flex justify-center gap-8 mb-8" style={{ display: 'flex', justifyContent: 'center', gap: '2rem', marginBottom: '3rem' }}>
<button
onClick={() => setActiveTab('text')}
className={`px-16 py-6 rounded-2xl font-bold tracking-wider transition-all duration-200 text-2xl ${activeTab === 'text'
? 'neu-tab-active'
: 'neu-btn text-gray-400 hover:text-white'
}`}
style={activeTab === 'text' ? { color: '#f0f0f0' } : {}}
>
TEXT INPUT
</button>
<button
onClick={() => setActiveTab('file')}
className={`px-16 py-6 rounded-2xl font-bold tracking-wider transition-all duration-200 text-2xl ${activeTab === 'file'
? 'neu-tab-active'
: 'neu-btn text-gray-400 hover:text-white'
}`}
style={activeTab === 'file' ? { color: '#f0f0f0' } : {}}
>
FILE UPLOAD
</button>
</div>
<div className="flex flex-col flex-grow relative" style={{ minHeight: '500px' }}>
{activeTab === 'text' ? (
<div className="w-full h-full relative group">
<textarea
className="w-full neu-input p-8 text-xl font-normal leading-relaxed resize-none text-gray-200 placeholder-gray-600 font-mono"
style={{ width: '100%', height: '500px', resize: 'none' }}
placeholder="Paste your content here..."
value={text}
onChange={(e) => setText(e.target.value)}
spellCheck="false"
/>
<div className="absolute bottom-6 right-8 text-sm text-gray-500 font-mono">
{text.length} chars
</div>
</div>
) : (
<div
{...getRootProps()}
className={`w-full neu-input flex flex-col items-center justify-center cursor-pointer transition-all duration-300
${isDragActive ? 'box-shadow-none border border-blue-500/50' : ''}
`}
style={{ width: '100%', height: '500px' }}
>
<input {...getInputProps()} />
{file ? (
<div className="flex flex-col items-center animate-in fade-in zoom-in duration-300">
<div className="neu-panel p-6 rounded-full mb-6">
<FileText size={64} className="text-blue-500" />
</div>
<p className="text-2xl font-bold text-gray-200 mb-2">{file.name}</p>
<p className="text-gray-500 mb-8 font-mono">{(file.size / 1024).toFixed(2)} KB</p>
<button
onClick={(e) => { e.stopPropagation(); setFile(null); }}
className="neu-btn px-8 py-3 text-red-400 hover:text-red-500 flex items-center gap-2"
>
<X size={20} /> Remove
</button>
</div>
) : (
<div className="text-center group">
<div className="mb-6 opacity-60 group-hover:opacity-100 transition-opacity duration-300">
<Upload size={80} className="text-gray-600 mx-auto" />
</div>
<p className="text-3xl text-gray-300 font-thin mb-3">Drag & Drop file</p>
<p className="text-gray-500 text-lg uppercase tracking-widest">.txt .pdf</p>
</div>
)}
</div>
)}
<div className="flex justify-center mt-10" style={{ display: 'flex', justifyContent: 'center', marginTop: '2.5rem' }}>
<button
onClick={handleAnalyze}
disabled={(!text.trim() && !file)}
className="neu-btn-primary px-16 py-5 rounded-2xl text-xl font-bold tracking-widest shadow-blue-500/10 disabled:opacity-50 disabled:cursor-not-allowed"
>
ANALYZE CONTENT
</button>
</div>
</div>
</div>
);
};
export default InputSection;
|