Skip to content

Commit

Permalink
feat: #28 splitting page into components
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZegarekPL
ZegarekPL committed Apr 13, 2024
1 parent 7c7aa07 commit 101db37
Showing 1 changed file with 94 additions and 56 deletions.
150 changes: 94 additions & 56 deletions src/app/(role_organizer)/myconference/[conferenceId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import Logo from "@/assets/home/laptop.jpg";
import { Box, BoxWithImage } from "@/components/common/Box/Box";
import Image, { StaticImageData } from "next/image";
import { useQuery } from "react-query";
import { getConferenceDetailsWithRoleFiltering } from "@/hooks/conference";
import {
GetConferenceDetailsWithRoleFilteringData,
getConferenceDetailsWithRoleFiltering,
} from "@/hooks/conference";
import Error500 from "@/components/common/Error/Error500";
import { GoCalendar } from "react-icons/go";
import { FaChevronRight, FaRegClock } from "react-icons/fa";
import { FaChevronRight, FaRegCalendarCheck } from "react-icons/fa";
import { IoMdPin } from "react-icons/io";
import { FaRegCalendarCheck } from "react-icons/fa";
import { FaRegCalendarXmark } from "react-icons/fa6";
import Link from "next/link";

Expand All @@ -31,54 +32,16 @@ export default function MyConferencePage({

return (
<Page>
{conferenceIdData && typeof conferenceIdData !== "string" ? (
{!isLoading &&
conferenceIdData &&
typeof conferenceIdData !== "string" ? (
<>
<BoxWithImage
className="text-darkblue w-[90%] lg:w-[60%] mt-20 mb-5"
src={Logo}
alt={"Logo"}
>
<div className="absolute top-0 left-0 w-full h-full flex flex-col items-center text-close2White p-4">
<h1 className="text-4xl pt-[5%]">{conferenceIdData.name}</h1>
<div className="w-full h-auto flex justify-around text-3xl pt-[10%]">
<div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center">
<FaRegCalendarCheck className="text-4xl" />
<h1 className="text-lg">
{conferenceIdData.startDateTime.split("T")[0]}{" "}
{conferenceIdData.startDateTime
.split("T")[1]
.split(":")
.slice(0, 2)
.join(":")}
</h1>
</div>
<div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center">
<FaRegCalendarXmark className="text-4xl" />
<h1 className="text-lg">
{conferenceIdData.endDateTime.split("T")[0]}{" "}
{conferenceIdData.endDateTime
.split("T")[1]
.split(":")
.slice(0, 2)
.join(":")}
</h1>
</div>
</div>
<div className="flex-col flex gap-x-3 w-full h-auto items-center justify-center pt-[18%]">
<div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center">
<IoMdPin className="text-4xl" />
<h1 className=" text-3xl">
{conferenceIdData.location.name}
</h1>
</div>
<Link
href={`https://www.google.com/maps/place/${conferenceIdData.location.locX}+${conferenceIdData.location.locY}`}
className={"pt-2 hover:underline flex items-center gap-2"}
>
Zobacz lokalizację na mapie <FaChevronRight />
</Link>
</div>
</div>
<MyConferencePageImageBox conferenceIdData={conferenceIdData} />
<div className="px-4 py-2 sm:px-8 sm:py-4 w-full">
<h1 className="w-full flex justify-center text-3xl">
{conferenceIdData.name}:
Expand All @@ -99,28 +62,55 @@ export default function MyConferencePage({
<Box className="text-darkblue w-[90%] lg:w-[60%] mt-5 mb-5">
<h1 className="w-full flex justify-center text-3xl">Prowadzący</h1>
<div className="w-full grid-cols-4 grid gap-8 pt-4">
<People username={"Jan Kowalski"} photo={Logo} />
<People
username={conferenceIdData.organizer.username}
photo={conferenceIdData.organizer.photo}
email={conferenceIdData.organizer.email}
/>
</div>
</Box>
<Box className="text-darkblue w-[90%] lg:w-[60%] mt-5 mb-5">
<h1 className="w-full flex justify-center text-3xl">Wykłady</h1>
</Box>
<Box className="text-darkblue w-[90%] lg:w-[60%] mt-5 mb-5">
<h1 className="w-full flex justify-center text-3xl">Uczestnicy</h1>
<div className="w-full grid-cols-4 grid gap-8 pt-4">
<People username={"Jan Kowalski"} photo={Logo} />
<People username={"Jan Kowalski"} photo={Logo} />
<People username={"Jan Kowalski"} photo={Logo} />
<People username={"Jan Kowalski"} photo={Logo} />
<People username={"Jan Kowalski"} photo={Logo} />
<People username={"Jan Kowalski"} photo={Logo} />
<People
username={conferenceIdData.organizer.username}
photo={conferenceIdData.organizer.photo}
/>
<People
username={conferenceIdData.organizer.username}
photo={conferenceIdData.organizer.photo}
/>
<People
username={conferenceIdData.organizer.username}
photo={conferenceIdData.organizer.photo}
/>
<People
username={conferenceIdData.organizer.username}
photo={conferenceIdData.organizer.photo}
/>
<People
username={conferenceIdData.organizer.username}
photo={conferenceIdData.organizer.photo}
/>
<People
username={conferenceIdData.organizer.username}
photo={conferenceIdData.organizer.photo}
/>
</div>
</Box>
<Box className="text-darkblue w-[90%] lg:w-[60%] mt-5 mb-20">
<h1 className="w-full flex justify-center text-3xl">Partnerzy</h1>
<h1 className="w-full flex justify-center text-3xl">Zdjęcia</h1>
<div className="w-full grid-cols-4 grid gap-8 pt-4">
<People username={"Jan Kowalski"} photo={Logo} />
<Image src={""} alt={""} />
</div>
</Box>
</>
) : null}
) : (
<p className="text-2xl text-close2White">Trwa ładowanie danych...</p>
)}
</Page>
);
}
Expand Down Expand Up @@ -152,3 +142,51 @@ function People({
</div>
);
}

function MyConferencePageImageBox({
conferenceIdData,
}: {
conferenceIdData: GetConferenceDetailsWithRoleFilteringData;
}) {
return (
<div className="absolute top-0 left-0 w-full h-full flex flex-col items-center text-close2White p-4">
<h1 className="text-4xl pt-[5%]">{conferenceIdData.name}</h1>
<div className="w-full h-auto flex justify-around text-3xl pt-[10%]">
<div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center">
<FaRegCalendarCheck className="text-4xl" />
<h1 className="text-lg">
{conferenceIdData.startDateTime.split("T")[0]}{" "}
{conferenceIdData.startDateTime
.split("T")[1]
.split(":")
.slice(0, 2)
.join(":")}
</h1>
</div>
<div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center">
<FaRegCalendarXmark className="text-4xl" />
<h1 className="text-lg">
{conferenceIdData.endDateTime.split("T")[0]}{" "}
{conferenceIdData.endDateTime
.split("T")[1]
.split(":")
.slice(0, 2)
.join(":")}
</h1>
</div>
</div>
<div className="flex-col flex gap-x-3 w-full h-auto items-center justify-center pt-[18%]">
<div className="flex-row flex gap-x-3 w-full h-auto items-center justify-center">
<IoMdPin className="text-4xl" />
<h1 className=" text-3xl">{conferenceIdData.location.name}</h1>
</div>
<Link
href={`https://www.google.com/maps/place/${conferenceIdData.location.locX}+${conferenceIdData.location.locY}`}
className={"pt-2 hover:underline flex items-center gap-2"}
>
Zobacz lokalizację na mapie <FaChevronRight />
</Link>
</div>
</div>
);
}

0 comments on commit 101db37

Please sign in to comment.