File size: 3,130 Bytes
0a0a57b | 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 | import { useRef, useState } from 'react'
function UploadBox({ onUpload, isUploading }) {
const inputRef = useRef(null)
const [isDragOver, setIsDragOver] = useState(false)
const handleClick = () => {
if (!isUploading) {
inputRef.current?.click()
}
}
const handleChange = (e) => {
const file = e.target.files?.[0]
if (file) {
onUpload(file)
}
}
const handleDragOver = (e) => {
e.preventDefault()
setIsDragOver(true)
}
const handleDragLeave = (e) => {
e.preventDefault()
setIsDragOver(false)
}
const handleDrop = (e) => {
e.preventDefault()
setIsDragOver(false)
const file = e.dataTransfer.files?.[0]
if (file) {
onUpload(file)
}
}
return (
<div
className={`upload-box ${isDragOver ? 'dragover' : ''} ${isUploading ? 'uploading' : ''}`}
onClick={handleClick}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
style={{
border: '1px solid var(--border-color)',
borderRadius: 'var(--radius)',
padding: '4rem 2rem',
textAlign: 'center',
cursor: 'pointer',
transition: 'all 0.2s ease',
background: 'var(--bg-card)',
height: '300px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
}}
>
<input
ref={inputRef}
type="file"
accept="video/*"
onChange={handleChange}
style={{ display: 'none' }}
/>
<div className="upload-icon" style={{ marginBottom: '1.5rem', color: 'var(--text-secondary)' }}>
{isUploading ? (
<div className="spinner" />
) : (
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="17 8 12 3 7 8" />
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
)}
</div>
<h2 className="upload-title" style={{
fontSize: '1.25rem',
fontWeight: '500',
marginBottom: '0.5rem',
color: 'var(--text-primary)'
}}>
{isUploading ? 'Processing...' : 'Upload Video'}
</h2>
<p className="upload-subtitle" style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>
{isUploading
? 'Creating shorts...'
: 'Drag & drop or click to browse'
}
</p>
</div>
)
}
export default UploadBox
|