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

21 lines
891 B
TypeScript
Raw Normal View History

import React from 'react'
export default function InputReadOnly({ label, value }: { label: string, value?: string }) {
return (
<div className="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-50 [&:has(input:is(:disabled))_*]:pointer-events-none">
<label htmlFor="input-33" className="block px-3 pt-2 text-xs font-medium text-foreground">
{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>
)
}