38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import React from 'react'
|
||
import { PhoneInputProps } from '@/app/types'
|
||
|
||
const PhoneInput = ({
|
||
value,
|
||
handleChange,
|
||
label = 'Номер телефона',
|
||
className = '',
|
||
operatorsInfo = true,
|
||
}: PhoneInputProps) => {
|
||
return (
|
||
<div className={className}>
|
||
{label && (
|
||
<div className="flex items-center gap-2 my-2">
|
||
<label className="font-medium text-sm text-gray-500">{label}</label>
|
||
</div>
|
||
)}
|
||
<input
|
||
type="tel"
|
||
id="phone_number"
|
||
name="phone_number"
|
||
placeholder={'+375 (__) ___ __ __'}
|
||
value={value || ''}
|
||
onChange={handleChange}
|
||
className="w-full px-3 py-2 border border-gray-300 text-black rounded-xl focus:outline-none focus:ring-1 focus:bg-white focus:ring-blue-400"
|
||
autoComplete="tel"
|
||
/>
|
||
{operatorsInfo && (
|
||
<p className="mt-1 text-xs text-gray-500">
|
||
Доступные операторы: A1 (29), А1 (44), МТС (33), life:) (25)
|
||
</p>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PhoneInput
|