from-to search route

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

@@ -1,5 +1,7 @@
 import React, { Suspense } from 'react'
+import type { Metadata } from 'next'
 import SearchCard from '../../components/SearchCard'
+import { SearchCardProps } from '@/app/types'
 
 interface SearchPageProps {
   params: {
@@ -8,10 +10,59 @@ interface SearchPageProps {
   }
 }
 
-// дернуть search api для from-to параметров
 async function fetchSearch(category: string, from: string, to: string) {
-  // get search api(owner_type, from, to)
-  return []
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/search/${category}/?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`,
+    {
+      cache: 'no-store',
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch search results')
+  }
+
+  const data = await response.json()
+  return {
+    results: data.results,
+    count: data.results.length,
+  }
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: SearchPageProps['params']
+}): Promise<Metadata> {
+  const [fromCity, toCity] = params.route.split('-')
+
+  return {
+    title: `Поиск ${params.category === 'mover' ? 'перевозчика' : 'посылки'} ${fromCity} → ${toCity} | Tripwb`,
+    description: `Найдите ${params.category === 'mover' ? 'перевозчика' : 'посылку'} по маршруту ${fromCity} → ${toCity} | Tripwb`,
+    openGraph: {
+      title: `Поиск ${params.category === 'mover' ? 'перевозчика' : 'посылки'} ${fromCity} → ${toCity} | Tripwb`,
+      description: `Найдите ${params.category === 'mover' ? 'перевозчика' : 'посылку'} по маршруту ${fromCity} → ${toCity}`,
+      url: `https://tripwb.com/search/${params.category}/${params.route}`,
+      siteName: 'TripWB',
+      images: [
+        {
+          url: 'https://i.ibb.co/gmqzzmb/header-logo-mod-1200x630.png',
+          width: 1200,
+          height: 630,
+          alt: 'Tripwb - поиск перевозчиков и посылок',
+        },
+      ],
+      locale: 'ru_RU',
+      type: 'website',
+    },
+    alternates: {
+      canonical: `https://tripwb.com/search/${params.category}/${params.route}`,
+    },
+    robots: {
+      index: true,
+      follow: true,
+    },
+  }
 }
 
 export default async function SearchPage(props: SearchPageProps) {
@@ -19,7 +70,7 @@ export default async function SearchPage(props: SearchPageProps) {
   const { category, route } = params
   const [fromCity, toCity] = route.split('-')
 
-  const initialData = await fetchSearch(category, fromCity, toCity)
+  const { results, count } = await fetchSearch(category, fromCity, toCity)
 
   return (
     <div className="container mx-auto p-4">
@@ -33,14 +84,12 @@ export default async function SearchPage(props: SearchPageProps) {
       </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>
-          ))}
+          {results.length > 0 ? (
+            results.map((item: SearchCardProps) => <SearchCard key={item.id} {...item} />)
+          ) : (
+            <div className="text-center text-gray-500">По данному маршруту ничего не найдено</div>
+          )}
         </div>
       </Suspense>
     </div>

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

@@ -108,12 +108,14 @@ const SearchCard = ({
               onClick={handleLeadClick}
             />
           </div>
-
-          <div className="rounded-lg bg-[#f8f8f8] p-5">
-            <div className="flex items-baseline gap-2">
-              <span className="text-gray-600">{comment}</span>
+          {comment && (
+            <div className="rounded-lg bg-[#f8f8f8] p-5">
+              <div className="flex items-baseline gap-2">
+                <span className="text-gray-600">{comment}</span>
+              </div>
             </div>
-          </div>
+          )}
+
           <div className="flex justify-end pt-2 text-sm text-gray-500">Объявление № {id}</div>
 
           <div className="mt-6 flex items-center justify-between">