From 6335c23129d8062f0c706a36e62850df833ca724 Mon Sep 17 00:00:00 2001 From: ariari04 Date: Thu, 29 Aug 2024 21:14:38 +0600 Subject: [PATCH] Add tenders card --- src/app/[locale]/tenders/page.tsx | 14 +++++--- src/entities/TenderCard.tsx | 47 +++++++++++++++++++++++++ src/widgets/TendersList/TendersList.tsx | 24 +++++++++++-- src/widgets/TendersList/tendersStore.ts | 4 +-- 4 files changed, 81 insertions(+), 8 deletions(-) create mode 100644 src/entities/TenderCard.tsx diff --git a/src/app/[locale]/tenders/page.tsx b/src/app/[locale]/tenders/page.tsx index 56d3a89..4742e65 100644 --- a/src/app/[locale]/tenders/page.tsx +++ b/src/app/[locale]/tenders/page.tsx @@ -4,10 +4,16 @@ import React from "react"; const Tenders = () => { return ( - - - <TendersList /> - </Container> + <div className="bg-[#E4F1FB]"> + <Container> + <Title + text="Тендеры" + size="md" + className="text-lg font-bold mb-[39px] pt-[101px]" + /> + <TendersList /> + </Container> + </div> ); }; diff --git a/src/entities/TenderCard.tsx b/src/entities/TenderCard.tsx new file mode 100644 index 0000000..6703303 --- /dev/null +++ b/src/entities/TenderCard.tsx @@ -0,0 +1,47 @@ +import { Title } from "@/shared/ui"; +import React from "react"; + +interface Props { + id: number; + id_of_card: string; + data_rk: string; + name_of_organization: string; + type_of_buy: string; + name_of_buy: string; + date_of_publication_datetime: string; + date_of_offer_datetime: string; + current_timestamp: string; +} +const TenderCard: React.FC<Props> = ({ + id, + id_of_card, + data_rk, + name_of_organization, + type_of_buy, + name_of_buy, + date_of_publication_datetime, + date_of_offer_datetime, + current_timestamp, +}: Props) => { + return ( + <div className="w-full min-h-[213px] bg-white shadow-sm rounded-sm flex gap-[82px] items-center p-6"> + <div className="w-[840px]"> + <Title + text={`№ ${id_of_card}`} + className="font-bold text-[24px] mb-[48px]" + /> + <Title + text={name_of_buy} + className="text-[18px] font-semibold leading-6 text-[#489FE1] mb-6" + /> + <Title + text={name_of_organization} + className="text-[18px] leading-6 font-normal" + /> + </div> + <div className="w-[285px]"></div> + </div> + ); +}; + +export default TenderCard; diff --git a/src/widgets/TendersList/TendersList.tsx b/src/widgets/TendersList/TendersList.tsx index 44e0b3d..e3764a4 100644 --- a/src/widgets/TendersList/TendersList.tsx +++ b/src/widgets/TendersList/TendersList.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import { useTendersStore } from "./tendersStore"; import { data } from "autoprefixer"; +import TenderCard from "@/entities/TenderCard"; interface Props {} const TendersList = () => { @@ -11,8 +12,27 @@ const TendersList = () => { useEffect(() => { getTenders(ordering); }, []); - console.log(data); - return <div>df</div>; + console.log(tenders); + return ( + <div className="bg-#E4F1FB"> + <div className="flex flex-col gap-2"> + {tenders?.results?.map((tender) => ( + <TenderCard + key={tender.id} + id={tender.id} + id_of_card={tender.id_of_card} + data_rk={tender.data_rk} + name_of_organization={tender.name_of_organization} + type_of_buy={tender.type_of_buy} + name_of_buy={tender.name_of_buy} + date_of_publication_datetime={tender.date_of_publication_datetime} + date_of_offer_datetime={tender.date_of_offer_datetime} + current_timestamp={tender.current_timestamp} + /> + ))} + </div> + </div> + ); }; export default TendersList; diff --git a/src/widgets/TendersList/tendersStore.ts b/src/widgets/TendersList/tendersStore.ts index 8c274eb..fdeea86 100644 --- a/src/widgets/TendersList/tendersStore.ts +++ b/src/widgets/TendersList/tendersStore.ts @@ -22,8 +22,8 @@ export const useTendersStore = create<useTendersStore>((set) => ({ try { set({ isLoading: true }); - const res = await apiInstance.get(`/procurements/?ordering${ordering}`); - set({ data: res.data.results }); + const res = await apiInstance.get(`/procurements/?ordering=${ordering}`); + set({ data: res.data }); } catch (error: unknown) { if (error instanceof AxiosError) { set({ error: error.message });