mobile search card view

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

@@ -39,7 +39,7 @@ const SearchCard = ({
 
   return (
     <>
-      {/* Desktop version */}
+      {/* десктоп */}
       <div className="hidden sm:block">
         <div className="bg-white rounded-xl shadow-lg p-6 w-full my-4">
           <div className="flex items-center justify-between mb-4">
@@ -80,10 +80,17 @@ const SearchCard = ({
               <span className="text-gray-600">{user_comment}</span>
             </div>
           </div>
+          <div className="text-gray-500 text-sm flex justify-end pt-2">
+            Объявление № {id}
+          </div>
 
           <div className="flex items-center justify-between mt-6">
             <div className="flex flex-col">
-              <span className="text-gray-500">Забрать из:</span>
+              {user_request === 'Нужен перевозчик' ? (
+                <span className="text-gray-500">Забрать из:</span>
+              ) : (
+                <span className="text-gray-500">Выезжаю из:</span>
+              )}
               <div className="flex flex-col">
                 <div className="flex items-center">
                   <Image
@@ -101,9 +108,7 @@ const SearchCard = ({
                 </div>
                 {user_request === 'Могу перевезти' && (
                   <div className="text-sm text-gray-500 mt-1">
-                    <span className="text-sm font-normal">
+                    <span className="text-sm font-normal">Отправление:</span>{' '}
-                      Дата отправления:
-                    </span>{' '}
                     <span className="text-sm font-semibold">
                       {day_out?.toLocaleDateString()}
                     </span>
@@ -120,6 +125,7 @@ const SearchCard = ({
                   width={15}
                   height={15}
                   alt="route vector"
+                  className="w-[15px] h-[15px] object-contain"
                 />
               </div>
               <div className="flex items-center justify-between w-[500px] mx-auto my-1">
@@ -144,9 +150,14 @@ const SearchCard = ({
               )}
             </div>
 
-            <div className="flex flex-col items-end">
+            <div className="flex flex-col -mb-[14px]">
-              <span className="text-gray-500">Доставить в:</span>
+              {user_request === 'Нужен перевозчик' ? (
-              <div className="flex flex-col items-end">
+                <div className="text-base text-gray-500">Доставить в:</div>
+              ) : (
+                <div className="text-base text-gray-500">Прибываю в:</div>
+              )}
+
+              <div className="flex flex-col">
                 <div className="flex items-center">
                   <Image
                     src={country_to_icon}
@@ -162,8 +173,8 @@ const SearchCard = ({
                   </span>
                 </div>
                 {user_request === 'Могу перевезти' && (
-                  <div className="text-sm text-gray-500 mt-1">
+                  <div className="text-sm text-gray-500">
-                    <span className="text-sm font-normal">Дата доставки:</span>{' '}
+                    <span className="text-sm font-normal">Прибытие:</span>{' '}
                     <span className="text-sm font-semibold">
                       {day_in?.toLocaleDateString()}
                     </span>
@@ -175,9 +186,120 @@ const SearchCard = ({
         </div>
       </div>
 
-      {/* мобильная версия */}
+      {/* мобилка */}
       <div className="block sm:hidden">
-        <div className="bg-white rounded-xl shadow-lg p-4 w-full my-4">asd</div>
+        <div className="bg-white rounded-xl shadow-lg p-4 w-full my-4">
+          <div className="flex items-center justify-between">
+            <div className={`text-sm font-semibold ${getUserRequestStyles()}`}>
+              {user_request}
+            </div>
+            <div className="text-sm font-semibold">
+              Тип посылки: <span className="text-orange">{cargo_type}</span>
+            </div>
+          </div>
+          <div className="flex flex-row items-center justify-between mt-5 mb-2 gap-3">
+            <div className="min-w-[64px] w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center shrink-0">
+              <Image
+                src={userImg}
+                alt={username}
+                width={52}
+                height={52}
+                className="rounded-full object-cover aspect-square w-[52px] h-[52px]"
+              />
+            </div>
+            <div className="bg-[#f8f8f8] rounded-lg text-sm font-normal p-4 flex-1">
+              {user_comment}
+            </div>
+          </div>
+          <div className="text-gray-500 text-xs flex justify-end">
+            Объявление № {id}
+          </div>
+
+          {user_request === 'Нужен перевозчик' ? (
+            <span className="text-gray-500 pl-7 text-sm">Забрать из:</span>
+          ) : (
+            <span className="text-gray-500 pl-7 text-sm">Выезжаю из:</span>
+          )}
+          <div className="flex flex-row items-stretch mt-4 mb-2 gap-4">
+            <div className="flex flex-col items-center h-[150px] relative">
+              <div className="h-full w-[10px] flex items-center justify-center relative">
+                <Image
+                  src="/images/vectormob.png"
+                  width={6}
+                  height={100}
+                  alt="route vector"
+                  className="absolute h-[150px] w-auto"
+                />
+                <div className="absolute -top-[10px] w-4 h-4 rounded-full bg-white border-3 border-[#065bff] z-10" />
+                <div className="absolute -bottom-[10px] w-4 h-4 rounded-full bg-white border-3 border-[#45c226] z-10" />
+              </div>
+            </div>
+            <div className="flex-1 flex flex-col justify-between">
+              <div className="flex items-center -mt-[14px]">
+                <Image
+                  src={country_from_icon}
+                  width={26}
+                  height={13}
+                  alt={country_from_code}
+                />
+                <span className="text-gray-400 text-sm pr-2 pl-1">
+                  {country_from_code}
+                </span>
+                <span className="text-base font-semibold">
+                  {start_point} / {country_from}
+                </span>
+              </div>
+
+              <div className="flex flex-col ">
+                <div className="flex gap-4 items-center">
+                  <span className="text-base">{moving_type}</span>
+                  <Image
+                    src={setMovingTypeIcon()}
+                    width={15}
+                    height={15}
+                    alt="route vector"
+                    className="w-[15px] h-[15px] object-contain"
+                  />
+                </div>
+                <div className="w-[165px] h-[2px] bg-gray-200 my-2" />
+                <div className="text-sm">
+                  Дата доставки: {estimated_date.toLocaleDateString()}
+                </div>
+              </div>
+
+              <div className="flex flex-col -mb-[14px]">
+                {user_request === 'Нужен перевозчик' ? (
+                  <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="text-gray-400 pr-2 pl-1">
+                    {country_to_code}
+                  </span>
+                  <span className="text-base font-semibold">
+                    {end_point} / {country_to}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+          {user_request === 'Могу перевезти' && (
+            <div className="text-sm text-gray-500 mt-3 ml-7">
+              <span className="text-sm font-normal">Прибытие:</span>{' '}
+              <span className="text-sm font-semibold">
+                {day_in?.toLocaleDateString()}
+              </span>
+            </div>
+          )}
+        </div>
       </div>
     </>
   )

frontend/app/page.tsx

@@ -98,7 +98,7 @@ export default function Home() {
       <div className="flex flex-col items-center justify-center mb-8">
         <h2 className="text-4xl text-center font-bold">Все объявления</h2>
         <div className="text-base my-3">
-          На нашем сайте размещено уже:{' '}
+          На нашем сайте размещено уже{' '}
           <span className="text-orange">{routes}</span> объявлений по отправке и
           перевозке посылок
         </div>