Novo layout

This commit is contained in:
Marco Santos
2025-07-24 00:07:59 +01:00
parent 11e532ac9a
commit dec8bd3909
24 changed files with 519 additions and 425 deletions

View File

@@ -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>