initiate drf app
This commit is contained in:
308
frontend/app/(urls)/search/components/SearchCard.tsx
Normal file
308
frontend/app/(urls)/search/components/SearchCard.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
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 (
|
||||
<>
|
||||
{/* десктоп */}
|
||||
<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 hover:bg-orange/80 text-white px-10 py-3 text-base font-semibold 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="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">
|
||||
{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
|
||||
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"
|
||||
className="w-[15px] h-[15px] object-contain"
|
||||
/>
|
||||
</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 -mb-[14px]">
|
||||
{user_request === 'Нужен перевозчик' ? (
|
||||
<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}
|
||||
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">
|
||||
<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">
|
||||
<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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchCard
|
||||
7
frontend/app/(urls)/search/page.tsx
Normal file
7
frontend/app/(urls)/search/page.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
const SearchPage = () => {
|
||||
return <div>SearchPage</div>
|
||||
}
|
||||
|
||||
export default SearchPage
|
||||
Reference in New Issue
Block a user