components/form/results.tsx

import Image from "next/image";

import HFSad from "@/assets/hfsad.svg";
interface ResultsInterface {
  label: string;
  score: number;
}

export const Results = ({ results }: { results: ResultsInterface[] }) => {
  return (
    <div className="w-full flex-col flex gap-5">
      {results?.length > 0 ? (
        <>
          <p className="text-white font-bold text-xl text-center uppercase tracking-widest">
            Results
          </p>
          {results?.map((result) => (
            <div key={result.label}>
              <div className="flex items-center justify-between border-b border-dashed border-slate-500/20 pb-1">
                <p className="text-slate-400 font-medium text-xs">
                  {result.label}
                </p>
                <p className="text-slate-300 font-bold text-xs">
                  {(result.score * 100).toFixed(3)}%
                </p>
              </div>
              <div className="w-full h-1.5 rounded-full bg-slate-700 mt-2">
                <div
                  className="bg-gradient-to-r from-indigo-600 to-teal-500 h-full blur-[1px] rounded-full"
                  style={{
                    width: `${result.score * 100}%`,
                  }}
                ></div>
              </div>
            </div>
          ))}
        </>
      ) : (
        <div className="h-full flex items-center justify-center flex-col">
          <Image
            src={HFSad}
            width={70}
            height={70}
            className="w-full max-w-[140px] mx-auto"
            alt="Hugging Face sad because no result"
          />
          <p className="text-slate-600 text-sm text-center mt-4">
            I'm waiting for you to upload an image so I can tell you what's
            in...
          </p>
        </div>
      )}
    </div>
  );
};