52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React from 'react'
|
|
import { cn } from '../lib/utils'
|
|
import { p } from './my-text'
|
|
|
|
interface pInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
topLabel?: string
|
|
fullWidth?: boolean
|
|
shrunkPadding?: boolean
|
|
error?: boolean
|
|
multiline?: boolean
|
|
numberOfLines?: number
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
export function pInput({
|
|
topLabel,
|
|
fullWidth = true,
|
|
shrunkPadding = false,
|
|
error,
|
|
multiline,
|
|
className,
|
|
style,
|
|
...props
|
|
}: pInputProps) {
|
|
const inputClasses = cn(
|
|
'flex w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
shrunkPadding ? 'py-1.5' : 'py-2',
|
|
error && 'border-destructive',
|
|
className
|
|
)
|
|
|
|
const Tag = multiline ? 'textarea' : 'input'
|
|
|
|
return (
|
|
<div style={{ ...(fullWidth ? { width: '100%' } : {}), ...style }}>
|
|
{topLabel && (
|
|
<p weight="medium" className="mb-1 text-sm text-gray-500">
|
|
{topLabel}
|
|
</p>
|
|
)}
|
|
{multiline ? (
|
|
<textarea
|
|
className={inputClasses}
|
|
rows={props.numberOfLines || 3}
|
|
{...(props as any)}
|
|
/>
|
|
) : (
|
|
<input className={inputClasses} {...props} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|