Deploy Inicial do SteelCheck com Docker Build Automatizado

2026-03-22 17:19:10 -03:00
commit 5e7dd082e3
24 changed files with 4324 additions and 0 deletions
--- a/components/FileUpload.tsx
+++ b/components/FileUpload.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { FileIcon, XIcon, UploadIcon } from './Icons';
+
+interface FileUploadProps {
+  onFileChange: (file: File | null) => void;
+}
+
+export const FileUpload: React.FC<FileUploadProps> = ({ onFileChange }) => {
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setFileName(file.name);
+      onFileChange(file);
+    }
+  }, [onFileChange]);
+
+  const handleRemoveFile = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setFileName(null);
+    onFileChange(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [onFileChange]);
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+
+  const onDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+
+  const onDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) {
+      setFileName(file.name);
+      onFileChange(file);
+    }
+  }, [onFileChange]);
+
+  return (
+    <div className="w-full">
+      {!fileName ? (
+        <label
+          htmlFor="file-upload"
+          onDragOver={onDragOver}
+          onDragLeave={onDragLeave}
+          onDrop={onDrop}
+          className={`
+                group relative flex flex-col items-center justify-center w-full h-64 
+                rounded-2xl border-2 border-dashed cursor-pointer transition-all duration-300
+                ${isDragOver
+              ? 'border-blue-500 bg-blue-50/50 dark:bg-blue-900/20 scale-[0.99]'
+              : 'border-slate-300 dark:border-slate-600 hover:border-blue-400 dark:hover:border-blue-500 hover:bg-slate-50/50 dark:hover:bg-slate-800/50'
+            }
+            `}
+        >
+          <div className="flex flex-col items-center justify-center pt-5 pb-6 text-center">
+            <div className={`
+                    p-4 rounded-full mb-4 transition-transform duration-300 group-hover:scale-110 
+                    ${isDragOver ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 group-hover:bg-blue-50 group-hover:text-blue-500 dark:group-hover:bg-slate-700'}
+                `}>
+              <UploadIcon className="w-8 h-8" />
+            </div>
+            <p className="mb-2 text-lg font-medium text-slate-700 dark:text-slate-200">
+              Clique ou arraste seu arquivo aqui
+            </p>
+            <p className="text-sm text-slate-500 dark:text-slate-400">
+              PDF, JPG ou PNG (máx. 10MB)
+            </p>
+          </div>
+          <input
+            ref={fileInputRef}
+            id="file-upload"
+            name="file-upload"
+            type="file"
+            className="hidden"
+            onChange={handleFileSelect}
+            accept="image/*,application/pdf"
+          />
+        </label>
+      ) : (
+        <div className="group relative w-full p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl shadow-sm hover:shadow-md transition-all flex items-center justify-between animate-fade-in">
+          <div className="flex items-center gap-4 overflow-hidden">
+            <div className="p-3 bg-blue-50 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400">
+              <FileIcon className="w-6 h-6" />
+            </div>
+            <div className="flex flex-col min-w-0">
+              <span className="text-sm font-semibold text-slate-700 dark:text-slate-200 truncate pr-4">{fileName}</span>
+              <span className="text-xs text-green-600 dark:text-green-400 font-medium">Pronto para análise</span>
+            </div>
+          </div>
+          <button
+            onClick={handleRemoveFile}
+            className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full transition-all"
+            title="Remover arquivo"
+          >
+            <XIcon className="w-5 h-5" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};