Garima1030/mediaforensics-platform

1const STEPS = [2  "Frame extraction & sampling",3  "Facial landmark detection (YOLO)",4  "Deepfake classification (EfficientNet)",5  "GAN fingerprint analysis",6  "ELA & JPEG artifact forensics",7  "Forensic heatmap generation",8]9 10export default function AnalyzingView({ fileName, progress, status }) {11  const stepsDone = Math.floor((progress / 100) * STEPS.length)12 13  return (14    <div className="card p-6 animate-fade-up">15      {/* File info */}16      <div className="flex items-center gap-3 mb-6">17        <div className="w-10 h-10 rounded-xl bg-surface-800 flex items-center justify-center text-xl">18          📄19        </div>20        <div>21          <div className="font-medium text-surface-100 text-sm">{fileName}</div>22          <div className="text-xs text-surface-500 mt-0.5 capitalize">{status}...</div>23        </div>24      </div>25 26      {/* Progress bar */}27      <div className="h-1 bg-surface-800 rounded-full mb-1 overflow-hidden">28        <div29          className="h-full bg-gradient-to-r from-brand-600 to-brand-400 rounded-full transition-all duration-500"30          style={{ width: `${progress}%` }}31        />32      </div>33      <div className="text-right text-xs text-surface-500 mb-6">{progress}%</div>34 35      {/* Steps */}36      <div className="space-y-3">37        {STEPS.map((step, i) => {38          const done    = i < stepsDone39          const current = i === stepsDone40          return (41            <div key={i} className="flex items-center gap-3">42              <div className={`43                w-5 h-5 rounded-full flex items-center justify-center text-[10px] flex-shrink-044                ${done    ? "bg-brand-500 text-white" : ""}45                ${current ? "bg-surface-700 border border-brand-500/50" : ""}46                ${!done && !current ? "bg-surface-800" : ""}47              `}>48                {done ? "✓" : current ? (49                  <span className="w-2 h-2 rounded-full bg-brand-400 animate-pulse block" />50                ) : ""}51              </div>52              <span className={`text-sm ${done ? "text-surface-300" : current ? "text-brand-400" : "text-surface-600"}`}>53                {step}54              </span>55            </div>56          )57        })}58      </div>59    </div>60  )61}62