turkmen-expo/app/[locale]/(root)/calendar/[id]/page.tsx

112 lines
3.3 KiB
TypeScript

import { EventPageButtons } from "@/components/shared/event-page-buttons";
import { getEventPage } from "@/services/calendar";
import { getLocale, getTranslations } from "next-intl/server";
import Image from "next/image";
export default async function EventPage({
params,
}: {
params: { id: string };
}) {
const { id } = params;
const lang = await getLocale();
const t = await getTranslations("events");
const data = await getEventPage(id, lang);
return (
<div className="flex flex-col container gap-20 pt-32 section-mb">
<h1 className="md:text-[48px] text-[28px] text-ON_SURFACE leading-[115%] font-medium">
{data?.title ? data?.title : null}
</h1>
<div className="flex flex-col lg:flex-row justify-between gap-6">
<div className="flex flex-col gap-20 w-full">
<div className="flex flex-col gap-8 event-block ">
<div className="flex justify-between items-center">
<h4>{t("date")}</h4>
<h5>{data?.date}</h5>
</div>
<hr />
{data?.location && (
<>
<div className="flex justify-between items-center">
<h4>{t("venue")}</h4>
<h5>{data?.location}</h5>
</div>
<hr />
</>
)}
{data?.organizers.length > 0 && (
<>
<div className="flex justify-between items-center">
<h4>{t("organiser")}</h4>
<h5>{data?.organizers[0]?.name}</h5>
</div>
</>
)}
{data?.coorganizers.length > 0 && (
<>
<hr />
<div className="flex justify-between items-center">
<h4>{t("coOrganiser")}</h4>
<h5>{data?.coorganizers[0]?.name}</h5>
</div>
</>
)}
</div>
{data?.url_detailed || data?.url_registration || data?.url_web || data?.web_site ? (
<EventPageButtons
once={Boolean(data?.our)}
details={data?.url_detailed ? data?.url_detailed : data?.web_site}
register={data?.url_registration}
visit={data?.url_web ? data?.url_web : data?.web_site}
/>
) : null}
</div>
<Image
src={data?.images?.[0]?.path || ""}
width={392}
height={392}
alt="event image"
className="size-[392px] object-cover"
/>
</div>
<div className="flex flex-col gap-8">
{data?.description ?? <div className="flex flex-col lg:flex-row gap-6">
<h4 className="text_24 lg:flex-[0_0_392px]">
{t("description")}
</h4>
<p className="flex-1 text_16">{data.description}</p>
</div>}
{/* {data?.event_topic && (
<>
<hr className="border-OUTLINE_VAR" />
<div className="flex flex-col lg:flex-row gap-6">
<h4 className="text_24 lg:flex-[0_0_392px]">
{t("theme")}
</h4>
<div
className="flex-1 text_16"
dangerouslySetInnerHTML={{ __html: data?.event_topic }}
/>
</div>
</>
)} */}
</div>
</div>
);
}