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

import { cn } from '@/lib/utils'
import React from 'react'

export default function InputReadOnly({ label, value, labelClassName, className }: { label: string, value: string, labelClassName?: string, className?: string }) {
  return (
    <div className={cn("relative 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", className)}>
      <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>

  )
}