87 lines
4.6 KiB
TypeScript
87 lines
4.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { LibraryHeader } from '../features/library/LibraryHeader'
|
|
import { UploadArea } from '../features/library/UploadArea'
|
|
import { DocumentGrid } from '../features/library/DocumentGrid'
|
|
import { useLibrary } from '../features/library/useLibrary'
|
|
|
|
export function HomePage() {
|
|
const [currentTab, setCurrentTab] = useState<'library' | 'trash'>('library')
|
|
const { fetchDocuments, fetchTrash } = useLibrary()
|
|
|
|
// Initial fetch
|
|
useEffect(() => {
|
|
if (currentTab === 'library') {
|
|
fetchDocuments()
|
|
} else {
|
|
fetchTrash()
|
|
}
|
|
}, [currentTab, fetchDocuments, fetchTrash])
|
|
|
|
return (
|
|
<div className="min-h-screen transition-colors">
|
|
<LibraryHeader currentTab={currentTab} onTabChange={setCurrentTab} />
|
|
|
|
<main className="max-w-7xl mx-auto px-6 py-8">
|
|
{currentTab === 'library' ? (
|
|
<UploadArea>
|
|
{/* Hero Section */}
|
|
<div className="relative overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-accent-600 to-indigo-900 text-white mb-8 shadow-2xl shadow-accent-900/20">
|
|
{/* Decorative background shapes */}
|
|
<div className="absolute top-0 right-0 -mr-20 -mt-20 w-96 h-96 bg-white/10 blur-3xl rounded-full mix-blend-overlay"></div>
|
|
<div className="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 bg-accent-400/20 blur-3xl rounded-full mix-blend-overlay"></div>
|
|
|
|
<div className="relative px-8 py-10 sm:px-12 sm:py-14 flex flex-col md:flex-row items-center justify-between gap-8">
|
|
<div className="max-w-xl">
|
|
<h2 className="text-3xl sm:text-4xl font-heading font-bold tracking-tight mb-3">
|
|
What will you edit today?
|
|
</h2>
|
|
<p className="text-base sm:text-lg text-accent-100 font-medium mb-6 leading-relaxed">
|
|
Upload any PDF to instantly annotate, sign, and modify it. Drop your files right here to get started.
|
|
</p>
|
|
<label className="cursor-pointer inline-flex items-center justify-center px-6 py-3 text-base font-bold rounded-full text-accent-900 bg-white hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-white/30 transition-all shadow-xl hover:-translate-y-1 active:translate-y-0">
|
|
<svg className="w-5 h-5 mr-2 text-accent-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
|
</svg>
|
|
<span>Browse Files</span>
|
|
<input
|
|
type="file"
|
|
accept="application/pdf"
|
|
multiple
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const uploader = document.querySelector('input[type="file"][multiple]') as HTMLInputElement
|
|
if (uploader && uploader !== e.target) {
|
|
uploader.files = e.target.files
|
|
const event = new Event('change', { bubbles: true })
|
|
uploader.dispatchEvent(event)
|
|
}
|
|
}}
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Visual Graphic */}
|
|
<div className="hidden md:block w-72 h-72 relative">
|
|
<div className="absolute inset-0 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 transform rotate-6 shadow-2xl"></div>
|
|
<div className="absolute inset-0 bg-white/20 backdrop-blur-md rounded-2xl border border-white/30 transform -rotate-3 shadow-2xl flex items-center justify-center">
|
|
<svg className="w-24 h-24 text-white/80" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<h3 className="text-2xl font-heading font-bold text-gray-900 dark:text-white">Recent Documents</h3>
|
|
</div>
|
|
|
|
<DocumentGrid isTrash={false} />
|
|
</UploadArea>
|
|
) : (
|
|
<DocumentGrid isTrash={true} />
|
|
)}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|