search urls

frontend/app/(urls)/search/[category]/[route]/page.tsx

@@ -0,0 +1,48 @@
+import React, { Suspense } from 'react'
+import SearchCard from '../../components/SearchCard'
+
+interface SearchPageProps {
+  params: {
+    category: string
+    route: string
+  }
+}
+
+// дернуть search api для from-to параметров
+async function fetchSearch(category: string, from: string, to: string) {
+  // get search api(owner_type, from, to)
+  return []
+}
+
+export default async function SearchPage(props: SearchPageProps) {
+  const params = await props.params
+  const { category, route } = params
+  const [fromCity, toCity] = route.split('-')
+
+  const initialData = await fetchSearch(category, fromCity, toCity)
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="mb-4 text-2xl font-bold">
+        {category === 'mover' ? 'Поиск перевозчика' : 'Поиск посылки'}
+      </h1>
+      <div className="mb-4">
+        <p>
+          Маршрут: {fromCity} → {toCity}
+        </p>
+      </div>
+
+      <Suspense fallback={<div>Загрузка результатов...</div>}>
+        {/* результаты поиска */}
+        <div className="space-y-4">
+          {initialData.map((item: any, index: number) => (
+            <div key={index} className="rounded-lg border p-4">
+              {/* Здесь будет карточка с результатом */}
+              <p>Результат поиска {index + 1}</p>
+            </div>
+          ))}
+        </div>
+      </Suspense>
+    </div>
+  )
+}

frontend/app/(urls)/search/[category]/page.tsx

@@ -0,0 +1,44 @@
+import React, { Suspense } from 'react'
+import SearchCard from '../components/SearchCard'
+
+interface SearchPageProps {
+  params: {
+    category: string
+  }
+  searchParams: {
+    [key: string]: string | string[] | undefined
+  }
+}
+
+// получаем все предложения по выбранному owner_type
+async function fetchSearch(category: string, query: string = '') {
+  // get search api(owner_type)
+  return []
+}
+
+export default async function SearchPage(props: SearchPageProps) {
+  const params = await props.params
+  const { category } = params
+
+  const initialData = await fetchSearch(category)
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1 className="mb-4 text-2xl font-bold">
+        {category === 'mover' ? 'Поиск перевозчика' : 'Поиск посылки'}
+      </h1>
+
+      <Suspense fallback={<div>Загрузка результатов...</div>}>
+        {/* Здесь будет компонент с результатами поиска */}
+        <div className="space-y-4">
+          {initialData.map((item: any, index: number) => (
+            <div key={index} className="rounded-lg border p-4">
+              {/* Здесь будет карточка с результатом */}
+              <p>Результат поиска {index + 1}</p>
+            </div>
+          ))}
+        </div>
+      </Suspense>
+    </div>
+  )
+}

frontend/app/(urls)/search/components/SearchCard.tsx

@@ -30,7 +30,7 @@ const SearchCard = ({
   }
 
   const setMovingTypeIcon = () => {
-    if (type_transport === 'air') {
+    if (type_transport === 'avia') {
       return '/images/airplane.png'
     }
     return '/images/car.png'

frontend/app/page.tsx

@@ -9,6 +9,7 @@ import News from '@/components/News'
 import { getFAQs } from '@/lib/main/fetchFAQ'
 import { getNews } from '@/lib/main/fetchNews'
 import { getFirstRoutes } from '@/lib/main/fetchFirstRoutes'
+import Link from 'next/link'
 
 export default async function Home() {
   const faqs = await getFAQs()
@@ -55,9 +56,12 @@ export default async function Home() {
       {/* форма на серч */}
       <AddressSelector />
 
-      <div className="decoration-orange hover:text-orange mb-20 cursor-pointer text-lg font-normal text-[#272424] underline underline-offset-4 transition-colors">
+      <Link
+        href="search/customer"
+        className="decoration-orange hover:text-orange mb-20 cursor-pointer text-lg font-normal text-[#272424] underline underline-offset-4 transition-colors"
+      >
         Я могу взять с собой посылку
-      </div>
+      </Link>
 
       <div className="mb-8 flex flex-col items-center justify-center">
         <h2 className="text-center text-4xl font-bold">Все объявления</h2>

frontend/components/AddressSelector.tsx

@@ -2,45 +2,65 @@
 
 import React, { useState } from 'react'
 import TextInput from './ui/TextInput'
-import Button from './ui/Button'
+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="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">
+    <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)}
+            handleChange={e => setFromAddress(e.target.value)}
             name="fromAddress"
             style="main"
           />
         </div>
-        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
+        <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)}
+            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"
-        />
+        <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>
   )