sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

account/sender UI

Browse Source
This commit is contained in:
Timofey
2025-05-21 17:36:10 +03:00
parent c6c405f232
commit 5ad12c34cd
10 changed files with 705 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
frontend/app/(urls)/search/components/SearchCard.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import Image, { StaticImageData } from 'next/image'
import Image from 'next/image'
import Button from '@/components/ui/Button'
import { SearchCardProps } from '@/app/types/index'
@@ -41,10 +41,10 @@ const SearchCard = ({
<>
{/* десктоп */}
<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">
<div className="my-4 w-full rounded-xl bg-white p-6 shadow-lg">
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-5">
<div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-200">
<Image
src={userImg}
alt={username}
@@ -56,35 +56,28 @@ const SearchCard = ({
<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()}`}
>
<div className={`text-base font-semibold ${getUserRequestStyles()}`}>
{user_request}
</div>
<div className="ml-1">
Тип посылки:{' '}
<span className="text-orange font-semibold ml-1">
{cargo_type}
</span>
Тип посылки: <span className="text-orange ml-1 font-semibold">{cargo_type}</span>
</div>
</div>
</div>
<Button
text="Откликнуться"
className="bg-orange hover:bg-orange/80 text-white px-10 py-3 text-base font-semibold transition-colors cursor-pointer"
className="bg-orange hover:bg-orange/80 cursor-pointer px-10 py-3 text-base font-semibold text-white transition-colors"
/>
</div>
<div className="bg-[#f8f8f8] rounded-lg p-5">
<div className="rounded-lg bg-[#f8f8f8] p-5">
<div className="flex items-baseline gap-2">
<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 justify-end pt-2 text-sm text-gray-500">Объявление № {id}</div>
<div className="flex items-center justify-between mt-6">
<div className="mt-6 flex items-center justify-between">
<div className="flex flex-col">
{user_request === 'Нужен перевозчик' ? (
<span className="text-gray-500">Забрать из:</span>
@@ -93,25 +86,16 @@ const SearchCard = ({
)}
<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="text-gray-400 pr-2 pl-1">
{country_from_code}
</span>
<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>
<span className="text-base font-semibold">
{start_point} / {country_from}
</span>
</div>
{user_request === 'Могу перевезти' && (
<div className="text-sm text-gray-500 mt-1">
<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">{day_out?.toLocaleDateString()}</span>
</div>
)}
</div>
@@ -125,10 +109,10 @@ const SearchCard = ({
width={15}
height={15}
alt="route vector"
className="w-[15px] h-[15px] object-contain"
className="h-[15px] w-[15px] object-contain"
/>
</div>
<div className="flex items-center justify-between w-[500px] mx-auto my-1">
<div className="mx-auto my-1 flex w-[500px] items-center justify-between">
<Image
src="/images/vector.svg"
width={500}
@@ -136,8 +120,8 @@ const SearchCard = ({
alt="route vector"
className="absolute"
/>
<div className="w-5 h-5 rounded-full bg-white border-3 border-[#065bff] relative z-10" />
<div className="w-5 h-5 rounded-full bg-white border-3 border-[#45c226] relative z-10" />
<div className="relative z-10 h-5 w-5 rounded-full border-3 border-[#065bff] bg-white" />
<div className="relative z-10 h-5 w-5 rounded-full border-3 border-[#45c226] bg-white" />
</div>
{user_request === 'Нужен перевозчик' && (
@@ -150,7 +134,7 @@ const SearchCard = ({
)}
</div>
<div className="flex flex-col -mb-[14px]">
<div className="-mb-[14px] flex flex-col">
{user_request === 'Нужен перевозчик' ? (
<div className="text-base text-gray-500">Доставить в:</div>
) : (
@@ -159,15 +143,8 @@ 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="text-gray-400 pr-2 pl-1">
{country_to_code}
</span>
<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>
<span className="text-base font-semibold">
{end_point} / {country_to}
</span>
@@ -175,9 +152,7 @@ const SearchCard = ({
{user_request === 'Могу перевезти' && (
<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">{day_in?.toLocaleDateString()}</span>
</div>
)}
</div>
@@ -188,41 +163,37 @@ const SearchCard = ({
{/* мобилка */}
<div className="block sm:hidden">
<div className="bg-white rounded-xl shadow-lg p-4 w-full my-4">
<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()}`}>{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">
<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}
width={52}
height={52}
className="rounded-full object-cover aspect-square w-[52px] h-[52px]"
className="aspect-square h-[52px] w-[52px] rounded-full object-cover"
/>
</div>
<div className="bg-[#f8f8f8] rounded-lg text-sm font-normal p-4 flex-1">
<div className="flex-1 rounded-lg bg-[#f8f8f8] p-4 text-sm font-normal">
{user_comment}
</div>
</div>
<div className="text-gray-500 text-xs flex justify-end">
Объявление № {id}
</div>
<div className="flex justify-end text-xs text-gray-500">Объявление № {id}</div>
{user_request === 'Нужен перевозчик' ? (
<span className="text-gray-500 pl-7 text-sm">Забрать из:</span>
<span className="pl-7 text-sm text-gray-500">Забрать из:</span>
) : (
<span className="text-gray-500 pl-7 text-sm">Выезжаю из:</span>
<span className="pl-7 text-sm text-gray-500">Выезжаю из:</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">
<div className="mt-4 mb-2 flex flex-row items-stretch gap-4">
<div className="relative flex h-[150px] flex-col items-center">
<div className="relative flex h-full w-[10px] items-center justify-center">
<Image
src="/images/vectormob.png"
width={6}
@@ -230,44 +201,35 @@ const SearchCard = ({
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 className="absolute -top-[10px] z-10 h-4 w-4 rounded-full border-3 border-[#065bff] bg-white" />
<div className="absolute -bottom-[10px] z-10 h-4 w-4 rounded-full border-3 border-[#45c226] bg-white" />
</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>
<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>
<span className="text-base font-semibold">
{start_point} / {country_from}
</span>
</div>
<div className="flex flex-col ">
<div className="flex gap-4 items-center">
<div className="flex flex-col">
<div className="flex items-center gap-4">
<span className="text-base">{moving_type}</span>
<Image
src={setMovingTypeIcon()}
width={15}
height={15}
alt="route vector"
className="w-[15px] h-[15px] object-contain"
className="h-[15px] w-[15px] object-contain"
/>
</div>
<div className="w-[165px] h-[2px] bg-gray-200 my-2" />
<div className="text-sm">
Дата доставки: {estimated_date.toLocaleDateString()}
</div>
<div className="my-2 h-[2px] w-[165px] bg-gray-200" />
<div className="text-sm">Дата доставки: {estimated_date.toLocaleDateString()}</div>
</div>
<div className="flex flex-col -mb-[14px]">
<div className="-mb-[14px] flex flex-col">
{user_request === 'Нужен перевозчик' ? (
<div className="text-sm text-gray-500">Доставить в:</div>
) : (
@@ -275,15 +237,8 @@ const SearchCard = ({
)}
<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>
<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>
<span className="text-base font-semibold">
{end_point} / {country_to}
</span>
@@ -292,11 +247,9 @@ const SearchCard = ({
</div>
</div>
{user_request === 'Могу перевезти' && (
<div className="text-sm text-gray-500 mt-3 ml-7">
<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">{day_in?.toLocaleDateString()}</span>
</div>
)}
</div>