fix: some types and UI changes

This commit is contained in:
Atash03 2026-03-27 15:07:59 +05:00
parent cd3b3d3ad1
commit b612711883
5 changed files with 54 additions and 41 deletions

View File

@ -62,12 +62,15 @@ export default async function EventPage({
)} )}
</div> </div>
{data?.url_detailed || data?.url_registration || data?.url_web || data?.web_site ? (
<EventPageButtons <EventPageButtons
once={Boolean(data?.our)} once={Boolean(data?.our)}
details={data?.url_detailed} details={data?.url_detailed ? data?.url_detailed : data?.web_site}
register={data?.url_registration} register={data?.url_registration}
visit={data?.url_web} 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>
); );

View File

@ -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>

View File

@ -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,12 +103,13 @@ 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>
{organizers && organizers?.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]">
{t("organiserLabel")} {t("organiserLabel")}
@ -115,6 +118,7 @@ export const EventCard = ({
{organizers ? organizers[0]?.name : null} {organizers ? organizers[0]?.name : null}
</p> </p>
</div> </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>

View File

@ -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>
); );

View File

@ -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 {