Novo layout
This commit is contained in:
@@ -3,29 +3,27 @@ import { CheckIcon, XIcon } from "lucide-react";
|
||||
type ResultDisplayProps = {
|
||||
value: string;
|
||||
validated: boolean | null;
|
||||
onChange?: (value: string) => void;
|
||||
};
|
||||
|
||||
export function ResultDisplay({ value, validated }: ResultDisplayProps) {
|
||||
const baseClasses = "flex items-center gap-2 px-3 py-2 border rounded-md text-sm ";
|
||||
export function ResultDisplay({ value, validated, onChange }: ResultDisplayProps) {
|
||||
const baseClasses = "flex items-center gap-2 px-3 py-2 border rounded-md text-sm w-full";
|
||||
const colors =
|
||||
validated === true
|
||||
? "border-green-500 text-green-700 bg-green-50"
|
||||
? "border-green-500 text-green-700 bg-green-50 dark:text-green-400 dark:bg-green-950 dark:border-green-700"
|
||||
: validated === false
|
||||
? "border-red-500 text-red-700 bg-red-50"
|
||||
: "border-gray-300 text-gray-700 bg-gray-100";
|
||||
? "border-red-500 text-red-700 bg-red-50 dark:text-red-400 dark:bg-red-950 dark:border-red-700"
|
||||
: "border-gray-300 text-gray-700 bg-gray-100 dark:text-gray-300 dark:bg-zinc-800 dark:border-gray-600";
|
||||
|
||||
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>
|
||||
)}
|
||||
<div className={baseClasses + " " + colors}>
|
||||
<input
|
||||
type="text"
|
||||
readOnly={!onChange}
|
||||
value={value}
|
||||
onChange={(e) => onChange?.(e.target.value)}
|
||||
className="flex-1 bg-transparent outline-none font-mono truncate"
|
||||
/>
|
||||
{validated === true && <CheckIcon className="w-5 h-5" />}
|
||||
{validated === false && <XIcon className="w-5 h-5" />}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user