fix: some types and UI changes
This commit is contained in:
parent
cd3b3d3ad1
commit
b612711883
|
|
@ -62,12 +62,15 @@ export default async function EventPage({
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<EventPageButtons
|
|
||||||
once={Boolean(data?.our)}
|
{data?.url_detailed || data?.url_registration || data?.url_web || data?.web_site ? (
|
||||||
details={data?.url_detailed}
|
<EventPageButtons
|
||||||
register={data?.url_registration}
|
once={Boolean(data?.our)}
|
||||||
visit={data?.url_web}
|
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>
|
</div>
|
||||||
|
|
||||||
<Image
|
<Image
|
||||||
|
|
@ -80,14 +83,14 @@ export default async function EventPage({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col gap-8">
|
<div className="flex flex-col gap-8">
|
||||||
<div className="flex flex-col lg:flex-row gap-6">
|
{data?.description ?? <div className="flex flex-col lg:flex-row gap-6">
|
||||||
<h4 className="text_24 lg:flex-[0_0_392px]">
|
<h4 className="text_24 lg:flex-[0_0_392px]">
|
||||||
{t("description")}
|
{t("description")}
|
||||||
</h4>
|
</h4>
|
||||||
<p className="flex-1 text_16">{data?.description}</p>
|
<p className="flex-1 text_16">{data.description}</p>
|
||||||
</div>
|
</div>}
|
||||||
|
|
||||||
{data?.event_topic && (
|
{/* {data?.event_topic && (
|
||||||
<>
|
<>
|
||||||
<hr className="border-OUTLINE_VAR" />
|
<hr className="border-OUTLINE_VAR" />
|
||||||
|
|
||||||
|
|
@ -101,7 +104,7 @@ export default async function EventPage({
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ export default async function CalendarPage() {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-6 w-full">
|
<div className="flex flex-col gap-6 w-full">
|
||||||
{data.data.map((item, i) => (
|
{data.data.map((item, i) => (
|
||||||
<EventCard dark={true} key={i} {...item} />
|
<EventCard dark={true} key={i} {...item} starts_at={item.starts_at_text} ends_at={item.ends_at_text} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,8 @@ import { Link } from "@/i18n/navigation";
|
||||||
interface Props {
|
interface Props {
|
||||||
id: number;
|
id: number;
|
||||||
description: string;
|
description: string;
|
||||||
starts_at: string;
|
starts_at: string | null;
|
||||||
ends_at: string;
|
ends_at: string | null;
|
||||||
date: string;
|
date: string;
|
||||||
title: string;
|
title: string;
|
||||||
web_site: string | null;
|
web_site: string | null;
|
||||||
|
|
@ -44,13 +44,15 @@ export const EventCard = ({
|
||||||
images,
|
images,
|
||||||
dark = false,
|
dark = false,
|
||||||
}: Props) => {
|
}: Props) => {
|
||||||
const formatDate = (dateString: string) => {
|
const formatDate = (dateString: string | null) => {
|
||||||
const dateParts = dateString?.split(" ");
|
if (!dateString) return null;
|
||||||
const date = dateParts?.[0];
|
const dateParts = dateString.split(" ");
|
||||||
const parts = date?.split("-");
|
const date = dateParts[0];
|
||||||
const formattedDate = `${parts?.[2]}.${parts?.[1]}.${parts?.[0]}`;
|
const parts = date.split("-");
|
||||||
|
if (parts.length === 3 && parts[0].length === 4) {
|
||||||
return formattedDate;
|
return `${parts[2]}.${parts[1]}.${parts[0]}`;
|
||||||
|
}
|
||||||
|
return dateString;
|
||||||
};
|
};
|
||||||
|
|
||||||
const t = useTranslations("events");
|
const t = useTranslations("events");
|
||||||
|
|
@ -80,8 +82,8 @@ export const EventCard = ({
|
||||||
{}
|
{}
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<p className="mr-5">{formatDate(starts_at)}</p>{" "}
|
{formatDate(starts_at) && <p className="mr-5">{formatDate(starts_at)}</p>}
|
||||||
<p>{formatDate(ends_at)}</p>
|
{formatDate(ends_at) && <p>{formatDate(ends_at)}</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -101,20 +103,22 @@ export const EventCard = ({
|
||||||
<div className="flex flex-col gap-[10px] md:gap-[15px]">
|
<div className="flex flex-col gap-[10px] md:gap-[15px]">
|
||||||
<h3
|
<h3
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"text-5 font-medium line leading-[115%] lg:leading-8 md:leading-[100%]"
|
"text-[18px] font-medium line leading-[115%] lg:leading-8 md:leading-[100%]"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-[10px]">
|
{organizers && organizers?.length > 0 &&
|
||||||
<p className="text-[#6B7674] uppercase font-normal leading-none text-[10px]">
|
<div className="flex flex-col gap-[10px]">
|
||||||
{t("organiserLabel")}
|
<p className="text-[#6B7674] uppercase font-normal leading-none text-[10px]">
|
||||||
</p>
|
{t("organiserLabel")}
|
||||||
<p className="text-[#6B7674] font-normal text-[13px] leading-[125%]">
|
</p>
|
||||||
{organizers ? organizers[0]?.name : null}
|
<p className="text-[#6B7674] font-normal text-[13px] leading-[125%]">
|
||||||
</p>
|
{organizers ? organizers[0]?.name : null}
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
{coorganizers && coorganizers?.length > 0 && (
|
{coorganizers && coorganizers?.length > 0 && (
|
||||||
<div className="flex flex-col gap-[10px]">
|
<div className="flex flex-col gap-[10px]">
|
||||||
<p className="text-[#6B7674] uppercase font-normal leading-none text-[10px]">
|
<p className="text-[#6B7674] uppercase font-normal leading-none text-[10px]">
|
||||||
|
|
@ -128,8 +132,8 @@ export const EventCard = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden md:flex text-2xl flex-col text-white leading- none h-[228px] min-w-[245px] items-center justify-center bg-[#31A898] px-12 text-center">
|
<div className="hidden md:flex text-2xl flex-col text-white leading- none h-[228px] min-w-[245px] items-center justify-center bg-[#31A898] px-12 text-center">
|
||||||
<p className="">{formatDate(starts_at)}</p>{" "}
|
{formatDate(starts_at) && <p>{formatDate(starts_at)}</p>}
|
||||||
<p>{formatDate(ends_at)}</p>
|
{formatDate(ends_at) && <p>{formatDate(ends_at)}</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
import { Link } from "@/i18n/navigation";
|
|
||||||
import { FC } from "react";
|
import { FC } from "react";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -12,6 +11,11 @@ interface Props {
|
||||||
details?: string;
|
details?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toExternalUrl(url: string) {
|
||||||
|
if (!/^https?:\/\//i.test(url)) return `https://${url}`;
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
export const EventPageButtons: FC<Props> = ({
|
export const EventPageButtons: FC<Props> = ({
|
||||||
once = false,
|
once = false,
|
||||||
register,
|
register,
|
||||||
|
|
@ -24,23 +28,23 @@ export const EventPageButtons: FC<Props> = ({
|
||||||
<div className="flex items-center gap-6">
|
<div className="flex items-center gap-6">
|
||||||
{once ? (
|
{once ? (
|
||||||
<>
|
<>
|
||||||
<Link href={register || ""} className="w-full" target="_blank">
|
<a href={toExternalUrl(register || "")} className="w-full" target="_blank" rel="noopener noreferrer">
|
||||||
<button className="full-btn bg-PRIMARY py-2.5 text-white">
|
<button className="full-btn bg-PRIMARY py-2.5 text-white">
|
||||||
{t("registration")}
|
{t("registration")}
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</a>
|
||||||
<Link href={visit || ""} className="w-full" target="_blank">
|
<a href={toExternalUrl(visit || "")} className="w-full" target="_blank" rel="noopener noreferrer">
|
||||||
<button className="full-btn bg-SECONDARY_CONTAINER py-2.5 text-ON_SECONDARY_CONTAINER">
|
<button className="full-btn bg-SECONDARY_CONTAINER py-2.5 text-ON_SECONDARY_CONTAINER">
|
||||||
{t("visitSite")}
|
{t("visitSite")}
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</a>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<Link href={details || ""} className="w-full" target="_blank">
|
<a href={toExternalUrl(details || "")} className="w-full" target="_blank" rel="noopener noreferrer">
|
||||||
<button className="full-btn w-full bg-PRIMARY py-2.5 text-white">
|
<button className="full-btn w-full bg-PRIMARY py-2.5 text-white">
|
||||||
{t("more")}
|
{t("more")}
|
||||||
</button>
|
</button>
|
||||||
</Link>
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,8 @@ export interface EventDatum {
|
||||||
installation_date: string;
|
installation_date: string;
|
||||||
dismantling_date: string;
|
dismantling_date: string;
|
||||||
event_topic: string;
|
event_topic: string;
|
||||||
|
starts_at_text: string | null
|
||||||
|
ends_at_text: string | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Coorganizers {
|
export interface Coorganizers {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue