dynamic routes for main page

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

@@ -1,42 +1,43 @@
 import React from 'react'
 import Image from 'next/image'
 import Button from '@/components/ui/Button'
-import { SearchCardProps } from '@/app/types/index'
+import { SearchCardProps } from '@/app/types'
+import noPhoto from '../../../../public/images/noPhoto.png'
 
 const SearchCard = ({
   id,
   username,
+  owner_type,
+  from_city_name,
+  from_country_name,
+  to_city_name,
+  to_country_name,
+  formatted_cargo_type,
+  formatted_transport,
+  type_transport,
   userImg,
-  start_point,
-  country_from,
+  comment,
+  formatted_departure,
+  formatted_arrival,
   country_from_icon,
-  country_from_code,
-  end_point,
-  country_to,
   country_to_icon,
-  country_to_code,
-  cargo_type,
-  user_request,
-  user_comment,
-  moving_type,
-  estimated_date,
-  day_out,
-  day_in,
 }: SearchCardProps) => {
   const getUserRequestStyles = () => {
-    if (user_request === 'Нужен перевозчик') {
+    if (owner_type === 'customer') {
       return 'text-[#065bff]'
     }
     return 'text-[#45c226]'
   }
 
   const setMovingTypeIcon = () => {
-    if (moving_type === 'Авиатранспорт') {
+    if (type_transport === 'air') {
       return '/images/airplane.png'
     }
     return '/images/car.png'
   }
 
+  const userRequest = owner_type === 'customer' ? 'Нужен перевозчик' : 'Могу перевезти'
+
   return (
     <>
       {/* десктоп */}
@@ -46,21 +47,22 @@ const SearchCard = ({
             <div className="flex items-center gap-5">
               <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200">
                 <Image
-                  src={userImg}
-                  alt={username}
+                  src={userImg || noPhoto}
+                  alt={`User ${username}`}
                   width={52}
                   height={52}
-                  className="rounded-full object-cover"
+                  className="aspect-square w-full rounded-full object-cover md:w-[84px]"
                 />
               </div>
               <div className="flex items-center gap-3">
                 <div className="text-base font-semibold">{username}</div>
                 <div className="text-gray-500">|</div>
                 <div className={`text-base font-semibold ${getUserRequestStyles()}`}>
-                  {user_request}
+                  {userRequest}
                 </div>
                 <div className="ml-1">
-                  Тип посылки: <span className="text-orange ml-1 font-semibold">{cargo_type}</span>
+                  Тип посылки:{' '}
+                  <span className="text-orange ml-1 font-semibold">{formatted_cargo_type}</span>
                 </div>
               </div>
             </div>
@@ -72,30 +74,37 @@ const SearchCard = ({
 
           <div className="rounded-lg bg-[#f8f8f8] p-5">
             <div className="flex items-baseline gap-2">
-              <span className="text-gray-600">{user_comment}</span>
+              <span className="text-gray-600">{comment}</span>
             </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">
             <div className="flex flex-col">
-              {user_request === 'Нужен перевозчик' ? (
+              {userRequest === 'Нужен перевозчик' ? (
                 <span className="text-gray-500">Забрать из:</span>
               ) : (
                 <span className="text-gray-500">Выезжаю из:</span>
               )}
               <div className="flex flex-col">
                 <div className="flex items-center">
-                  <Image src={country_from_icon} width={26} height={13} alt={country_from_code} />
-                  <span className="pr-2 pl-1 text-gray-400">{country_from_code}</span>
+                  <Image
+                    src={country_from_icon}
+                    width={26}
+                    height={13}
+                    alt={from_country_name.substring(0, 3)}
+                  />
+                  <span className="pr-2 pl-1 text-gray-400">
+                    {from_country_name.substring(0, 3).toUpperCase()}
+                  </span>
                   <span className="text-base font-semibold">
-                    {start_point} / {country_from}
+                    {from_city_name} / {from_country_name}
                   </span>
                 </div>
-                {user_request === 'Могу перевезти' && (
+                {userRequest === 'Могу перевезти' && (
                   <div className="mt-1 text-sm text-gray-500">
                     <span className="text-sm font-normal">Отправление:</span>{' '}
-                    <span className="text-sm font-semibold">{day_out?.toLocaleDateString()}</span>
+                    <span className="text-sm font-semibold">{formatted_departure}</span>
                   </div>
                 )}
               </div>
@@ -103,7 +112,7 @@ const SearchCard = ({
 
             <div className="text-center">
               <div className="flex items-center justify-center gap-2">
-                <span className="text-base font-semibold">{moving_type}</span>
+                <span className="text-base font-semibold">{formatted_transport}</span>
                 <Image
                   src={setMovingTypeIcon()}
                   width={15}
@@ -124,18 +133,16 @@ const SearchCard = ({
                 <div className="relative z-10 h-5 w-5 rounded-full border-3 border-[#45c226] bg-white" />
               </div>
 
-              {user_request === 'Нужен перевозчик' && (
+              {userRequest === 'Нужен перевозчик' && (
                 <div className="text-sm text-gray-500">
                   <span className="text-sm font-normal">Дата доставки:</span>{' '}
-                  <span className="text-sm font-semibold">
-                    {estimated_date.toLocaleDateString()}
-                  </span>
+                  <span className="text-sm font-semibold">{formatted_arrival}</span>
                 </div>
               )}
             </div>
 
             <div className="-mb-[14px] flex flex-col">
-              {user_request === 'Нужен перевозчик' ? (
+              {userRequest === 'Нужен перевозчик' ? (
                 <div className="text-base text-gray-500">Доставить в:</div>
               ) : (
                 <div className="text-base text-gray-500">Прибываю в:</div>
@@ -143,16 +150,23 @@ const SearchCard = ({
 
               <div className="flex flex-col">
                 <div className="flex items-center">
-                  <Image src={country_to_icon} width={26} height={13} alt={country_to_code} />
-                  <span className="pr-2 pl-1 text-gray-400">{country_to_code}</span>
+                  <Image
+                    src={country_to_icon}
+                    width={26}
+                    height={13}
+                    alt={to_country_name.substring(0, 3)}
+                  />
+                  <span className="pr-2 pl-1 text-gray-400">
+                    {to_country_name.substring(0, 3).toUpperCase()}
+                  </span>
                   <span className="text-base font-semibold">
-                    {end_point} / {country_to}
+                    {to_city_name} / {to_country_name}
                   </span>
                 </div>
-                {user_request === 'Могу перевезти' && (
+                {userRequest === 'Могу перевезти' && (
                   <div className="text-sm text-gray-500">
                     <span className="text-sm font-normal">Прибытие:</span>{' '}
-                    <span className="text-sm font-semibold">{day_in?.toLocaleDateString()}</span>
+                    <span className="text-sm font-semibold">{formatted_arrival}</span>
                   </div>
                 )}
               </div>
@@ -165,28 +179,26 @@ const SearchCard = ({
       <div className="block sm:hidden">
         <div className="my-4 w-full rounded-xl bg-white p-4 shadow-lg">
           <div className="flex items-center justify-between">
-            <div className={`text-sm font-semibold ${getUserRequestStyles()}`}>{user_request}</div>
+            <div className={`text-sm font-semibold ${getUserRequestStyles()}`}>{userRequest}</div>
             <div className="text-sm font-semibold">
-              Тип посылки: <span className="text-orange">{cargo_type}</span>
+              Тип посылки: <span className="text-orange">{formatted_cargo_type}</span>
             </div>
           </div>
           <div className="mt-5 mb-2 flex flex-row items-center justify-between gap-3">
             <div className="flex h-16 w-16 min-w-[64px] shrink-0 items-center justify-center rounded-full bg-gray-200">
               <Image
-                src={userImg}
-                alt={username}
+                src={noPhoto}
+                alt={`User ${username}`}
                 width={52}
                 height={52}
                 className="aspect-square h-[52px] w-[52px] rounded-full object-cover"
               />
             </div>
-            <div className="flex-1 rounded-lg bg-[#f8f8f8] p-4 text-sm font-normal">
-              {user_comment}
-            </div>
+            <div className="flex-1 rounded-lg bg-[#f8f8f8] p-4 text-sm font-normal">{comment}</div>
           </div>
           <div className="flex justify-end text-xs text-gray-500">Объявление № {id}</div>
 
-          {user_request === 'Нужен перевозчик' ? (
+          {userRequest === 'Нужен перевозчик' ? (
             <span className="pl-7 text-sm text-gray-500">Забрать из:</span>
           ) : (
             <span className="pl-7 text-sm text-gray-500">Выезжаю из:</span>
@@ -207,16 +219,23 @@ const SearchCard = ({
             </div>
             <div className="flex flex-1 flex-col justify-between">
               <div className="-mt-[14px] flex items-center">
-                <Image src={country_from_icon} width={26} height={13} alt={country_from_code} />
-                <span className="pr-2 pl-1 text-sm text-gray-400">{country_from_code}</span>
+                <Image
+                  src={`/images/flags/${from_country_name.toLowerCase()}.png`}
+                  width={26}
+                  height={13}
+                  alt={from_country_name.substring(0, 3)}
+                />
+                <span className="pr-2 pl-1 text-sm text-gray-400">
+                  {from_country_name.substring(0, 3).toUpperCase()}
+                </span>
                 <span className="text-base font-semibold">
-                  {start_point} / {country_from}
+                  {from_city_name} / {from_country_name}
                 </span>
               </div>
 
               <div className="flex flex-col">
                 <div className="flex items-center gap-4">
-                  <span className="text-base">{moving_type}</span>
+                  <span className="text-base">{formatted_transport}</span>
                   <Image
                     src={setMovingTypeIcon()}
                     width={15}
@@ -226,30 +245,37 @@ const SearchCard = ({
                   />
                 </div>
                 <div className="my-2 h-[2px] w-[165px] bg-gray-200" />
-                <div className="text-sm">Дата доставки: {estimated_date.toLocaleDateString()}</div>
+                <div className="text-sm">Дата доставки: {formatted_arrival}</div>
               </div>
 
               <div className="-mb-[14px] flex flex-col">
-                {user_request === 'Нужен перевозчик' ? (
+                {userRequest === 'Нужен перевозчик' ? (
                   <div className="text-sm text-gray-500">Доставить в:</div>
                 ) : (
                   <div className="text-sm text-gray-500">Прибываю в:</div>
                 )}
 
                 <div className="flex items-center">
-                  <Image src={country_to_icon} width={26} height={13} alt={country_to_code} />
-                  <span className="pr-2 pl-1 text-gray-400">{country_to_code}</span>
+                  <Image
+                    src={`/images/flags/${to_country_name.toLowerCase()}.png`}
+                    width={26}
+                    height={13}
+                    alt={to_country_name.substring(0, 3)}
+                  />
+                  <span className="pr-2 pl-1 text-gray-400">
+                    {to_country_name.substring(0, 3).toUpperCase()}
+                  </span>
                   <span className="text-base font-semibold">
-                    {end_point} / {country_to}
+                    {to_city_name} / {to_country_name}
                   </span>
                 </div>
               </div>
             </div>
           </div>
-          {user_request === 'Могу перевезти' && (
+          {userRequest === 'Могу перевезти' && (
             <div className="mt-3 ml-7 text-sm text-gray-500">
               <span className="text-sm font-normal">Прибытие:</span>{' '}
-              <span className="text-sm font-semibold">{day_in?.toLocaleDateString()}</span>
+              <span className="text-sm font-semibold">{formatted_arrival}</span>
             </div>
           )}
         </div>