🎨
UI Knihovna
Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.
Nahrávání souborů
Rozhraní "Táhni a pusť" pro nahrávání souborů.
Nahrávací zóna
Click to upload
or drag and drop your files here (Max: 10MB)
Uploader.tsxLanguage: tsx
import { useState } from 'react';
export function DropzoneUploader() {
const [isDragging, setIsDragging] = useState(false);
return (
<div
className={`w-full max-w-md p-8 border-2 border-dashed rounded-3xl transition-all duration-200 flex flex-col items-center justify-center text-center ${
isDragging ? 'border-accent bg-accent/5' : 'border-border bg-surface'
}`}
onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
onDragLeave={() => setIsDragging(false)}
onDrop={(e) => { e.preventDefault(); setIsDragging(false); }}
>
<div className={`w-16 h-16 rounded-full flex items-center justify-center mb-4 transition-colors ${isDragging ? 'bg-accent/20 text-accent' : 'bg-black/5 text-muted'}`}>
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} className="w-8 h-8">
<path strokeLinecap="round" strokeLinejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
</div>
<h4 className="font-semibold text-foreground text-lg mb-1">Click to upload</h4>
<p className="text-muted text-sm px-4">or drag and drop your files here (Max: 10MB)</p>
</div>
);
}