sarlink-portal/components/input-read-only.tsx

import { CheckCheck, X } from "lucide-react";
import { cn } from "@/lib/utils";

export default function InputReadOnly({
	label,
	value,
	labelClassName,
	className,
	showCheck = true,
	checkTrue = false,
}: {
	label: string;
	value: string;
	labelClassName?: string;
	className?: string;
	showCheck?: boolean;
	checkTrue?: boolean;
}) {
	return (
		<div
			className={cn(
				"relative flex items-center justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-disabled:cursor-not-allowed has-disabled:opacity-80 [&:has(input:is(:disabled))_*]:pointer-events-none col-span-2 sm:col-span-1",
				className,
			)}
		>
			<div>
				<label
					htmlFor="input-33"
					className={cn("block px-3 pt-2 text-xs font-medium", labelClassName)}
				>
					{label}
				</label>
				<input
					id="input-33"
					className="flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
					placeholder={value}
					disabled
					value={value}
					type="text"
				/>
			</div>

			{showCheck && (
				<div>
					{checkTrue ? (
						<CheckCheck className="mx-4 text-green-500" />
					) : (
						<X className="mx-4 text-red-500" />
					)}
				</div>
			)}
		</div>
	);
}