48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import TextInput from './ui/TextInput'
|
|
import Button from './ui/Button'
|
|
|
|
export default function AddressSelector() {
|
|
const [fromAddress, setFromAddress] = useState('')
|
|
const [toAddress, setToAddress] = useState('')
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 w-full my-2 sm:my-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:gap-3">
|
|
<div className="w-full sm:flex-[3] min-w-0 sm:px-1">
|
|
<TextInput
|
|
placeholder="Минск, Беларусь"
|
|
tooltip="Укажите пункт (Город/Страна), откуда необходимо забрать посылку."
|
|
label="Забрать посылку из"
|
|
value={fromAddress}
|
|
handleChange={(e) => setFromAddress(e.target.value)}
|
|
name="fromAddress"
|
|
style="main"
|
|
/>
|
|
</div>
|
|
<div className="w-full sm:flex-[3] min-w-0 sm:px-1">
|
|
<TextInput
|
|
placeholder="Москва, Россия"
|
|
label="Доставить посылку в"
|
|
tooltip="Укажите пункт (Город/Страна), куда необходимо доставить посылку."
|
|
value={toAddress}
|
|
handleChange={(e) => setToAddress(e.target.value)}
|
|
name="toAddress"
|
|
style="main"
|
|
/>
|
|
</div>
|
|
<Button
|
|
text="Найти перевозчика"
|
|
className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-orange hover:bg-orange/80 text-white p-4"
|
|
/>
|
|
<Button
|
|
text="Найти посылку"
|
|
className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-800 p-4"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|