New Layout

geradoresfe/src/components/ui/ResultDisplay.tsx

@@ -0,0 +1,33 @@
+import { CheckIcon, XIcon } from "lucide-react";
+
+type ResultDisplayProps = {
+    value: string;
+    validated: boolean | null;
+};
+
+export function ResultDisplay({ value, validated }: ResultDisplayProps) {
+    const baseClasses = "flex items-center gap-2 px-3 py-2 border rounded-md text-sm ";
+    const colors =
+        validated === true
+            ? "border-green-500 text-green-700 bg-green-50"
+            : validated === false
+                ? "border-red-500 text-red-700 bg-red-50"
+                : "border-gray-300 text-gray-700 bg-gray-100";
+
+    return (
+        <div className={baseClasses + colors}>
+            {validated !== null ? (
+                <input
+                    type="text"
+                    readOnly
+                    value={value || "Resultado..."}
+                    className="flex-1 bg-transparent outline-none font-mono truncate"
+                />
+            ) : (
+                <span className="font-mono flex-1 truncate">{value || "Resultado..."}</span>
+            )}
+            {validated === true && <CheckIcon className="w-5 h-5" />}
+            {validated === false && <XIcon className="w-5 h-5" />}
+        </div>
+    );
+}