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

search card - desktop

Browse Source
This commit is contained in:
Timofey
2025-05-14 15:19:02 +03:00
parent e766284333
commit 5827f5d7a5
18 changed files with 366 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
frontend/app/(urls)/search/components/SearchCard.tsx Normal file
View File

@@ -0,0 +1,186 @@
import React from 'react'
import Image, { StaticImageData } from 'next/image'
import Button from '@/components/ui/Button'
import { SearchCardProps } from '@/app/types/index'
const SearchCard = ({
id,
username,
userImg,
start_point,
country_from,
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 === 'Нужен перевозчик') {
return 'text-[#065bff]'
}
return 'text-[#45c226]'
}
const setMovingTypeIcon = () => {
if (moving_type === 'Авиатранспорт') {
return '/images/airplane.png'
}
return '/images/car.png'
}
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">
<div className="flex items-center gap-5">
<div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
<Image
src={userImg}
alt={username}
width={52}
height={52}
className="rounded-full object-cover"
/>
</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}
</div>
<div className="ml-1">
Тип посылки:{' '}
<span className="text-orange font-semibold ml-1">
{cargo_type}
</span>
</div>
</div>
</div>
<Button
text="Откликнуться"
className="bg-orange text-white px-10 py-3 text-base font-semibold hover:bg-orange/80 transition-colors cursor-pointer"
/>
</div>
<div className="bg-[#f8f8f8] rounded-lg p-5">
<div className="flex items-baseline gap-2">
<span className="text-gray-600">{user_comment}</span>
</div>
</div>
<div className="flex items-center justify-between mt-6">
<div className="flex flex-col">
<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="text-gray-400 pr-2 pl-1">
{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">
<span className="text-sm font-normal">
Дата отправления:
</span>{' '}
<span className="text-sm font-semibold">
{day_out?.toLocaleDateString()}
</span>
</div>
)}
</div>
</div>
<div className="text-center">
<div className="flex items-center justify-center gap-2">
<span className="text-base font-semibold">{moving_type}</span>
<Image
src={setMovingTypeIcon()}
width={15}
height={15}
alt="route vector"
/>
</div>
<div className="flex items-center justify-between w-[500px] mx-auto my-1">
<Image
src="/images/vector.svg"
width={500}
height={6}
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>
{user_request === 'Нужен перевозчик' && (
<div className="text-sm text-gray-500">
<span className="text-sm font-normal">Дата доставки:</span>{' '}
<span className="text-sm font-semibold">
{estimated_date.toLocaleDateString()}
</span>
</div>
)}
</div>
<div className="flex flex-col items-end">
<span className="text-gray-500">Доставить в:</span>
<div className="flex flex-col items-end">
<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>
{user_request === 'Могу перевезти' && (
<div className="text-sm text-gray-500 mt-1">
<span className="text-sm font-normal">Дата доставки:</span>{' '}
<span className="text-sm font-semibold">
{day_in?.toLocaleDateString()}
</span>
</div>
)}
</div>
</div>
</div>
</div>
</div>
{/* мобильная версия */}
<div className="block sm:hidden">
<div className="bg-white rounded-xl shadow-lg p-4 w-full my-4">asd</div>
</div>
</>
)
}
export default SearchCard

7
frontend/app/(urls)/search/page.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react'
const SearchPage = () => {
return <div>SearchPage</div>
}
export default SearchPage