68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState } from 'react'
|
||
import TextInput from './ui/TextInput'
|
||
import Link from 'next/link'
|
||
|
||
export default function AddressSelector() {
|
||
const [fromAddress, setFromAddress] = useState('')
|
||
const [toAddress, setToAddress] = useState('')
|
||
|
||
const formatAddress = (address: string) => {
|
||
return address
|
||
.toLowerCase()
|
||
.trim()
|
||
.replace(/[^a-zа-я0-9\s-]/gi, '')
|
||
.replace(/\s+/g, '-')
|
||
}
|
||
|
||
const getSearchUrl = (category: 'mover' | 'customer') => {
|
||
if (!fromAddress || !toAddress) return `/search/${category}`
|
||
|
||
const from = formatAddress(fromAddress)
|
||
const to = formatAddress(toAddress)
|
||
return `/search/${category}/${from}-${to}`
|
||
}
|
||
|
||
return (
|
||
<div className="my-2 w-full rounded-xl bg-white p-4 shadow-lg sm:my-4 sm:p-6">
|
||
<div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:gap-3">
|
||
<div className="w-full min-w-0 sm:flex-[3] sm:px-1">
|
||
<TextInput
|
||
placeholder="Минск, Беларусь"
|
||
tooltip="Укажите пункт (Город/Страна), откуда необходимо забрать посылку."
|
||
label="Забрать посылку из"
|
||
value={fromAddress}
|
||
handleChange={e => setFromAddress(e.target.value)}
|
||
name="fromAddress"
|
||
style="main"
|
||
/>
|
||
</div>
|
||
<div className="w-full min-w-0 sm:flex-[3] sm:px-1">
|
||
<TextInput
|
||
placeholder="Москва, Россия"
|
||
label="Доставить посылку в"
|
||
tooltip="Укажите пункт (Город/Страна), куда необходимо доставить посылку."
|
||
value={toAddress}
|
||
handleChange={e => setToAddress(e.target.value)}
|
||
name="toAddress"
|
||
style="main"
|
||
/>
|
||
</div>
|
||
<Link
|
||
href={getSearchUrl('mover')}
|
||
className="bg-orange hover:bg-orange/80 w-full rounded-2xl p-4 text-center whitespace-nowrap text-white sm:w-auto sm:flex-1"
|
||
>
|
||
Найти перевозчика
|
||
</Link>
|
||
<Link
|
||
href={getSearchUrl('customer')}
|
||
className="w-full rounded-2xl bg-gray-100 p-4 text-center whitespace-nowrap text-gray-800 hover:bg-gray-200 sm:w-auto sm:flex-1"
|
||
>
|
||
Найти посылку
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|