"use client"; import { cn } from "@/lib/utils"; import React, { useRef, useState } from "react"; import { motion } from "motion/react"; import { IconUpload } from "@tabler/icons-react"; import { useDropzone } from "react-dropzone"; const mainVariant = { initial: { x: 0, y: 0, }, animate: { x: 20, y: -20, opacity: 0.9, }, }; const secondaryVariant = { initial: { opacity: 0, }, animate: { opacity: 1, }, }; export const FileUpload = ({ onChange, }: { onChange?: (files: File[]) => void; }) => { const [files, setFiles] = useState([]); const fileInputRef = useRef(null); const handleFileChange = (newFiles: File[]) => { setFiles((prevFiles) => [...prevFiles, ...newFiles]); onChange && onChange(newFiles); }; const handleClick = () => { fileInputRef.current?.click(); }; const { getRootProps, isDragActive } = useDropzone({ multiple: false, noClick: true, onDrop: handleFileChange, onDropRejected: (error) => { console.log(error); }, }); return (

handleFileChange(Array.from(e.target.files || []))} className="hidden" />

Upload file

Drag or drop your files here or click to upload

{files.length > 0 && files.map((file, idx) => (

{file.name} {(file.size / (1024 * 1024)).toFixed(2)} MB

{file.type} modified{" "} {new Date(file.lastModified).toLocaleDateString()}

))} {!files.length && ( {isDragActive ? ( Drop it ) : ( )} )} {!files.length && ( )}

); }; export function GridPattern() { const columns = 41; const rows = 11; return (

{Array.from({ length: rows }).map((_, row) => Array.from({ length: columns }).map((_, col) => { const index = row * columns + col; return (

); }), )}

); }

File Upload

Instalação

Dependências