96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export type FeaturedEvent = {
|
|
title: string;
|
|
date: string;
|
|
step: string;
|
|
where: string;
|
|
desc: string;
|
|
image: string;
|
|
thumb: string;
|
|
schedule: { label: string; time: string }[];
|
|
};
|
|
|
|
export function FeaturedEventCard({ e }: { e: FeaturedEvent }) {
|
|
return (
|
|
<div className="evc">
|
|
<div className="evc__grid">
|
|
<div className="evc__media">
|
|
<Image src={e.image} alt={e.title} fill className="img-cover" sizes="280px" />
|
|
</div>
|
|
<div className="evc__body">
|
|
<div className="evc__head">
|
|
<h3 className="evc__title">{e.title}</h3>
|
|
<div className="evc__meta">
|
|
<p className="evc__date">{e.date}</p>
|
|
<span>
|
|
<p className="evc__step-label">Step</p>
|
|
<p className="evc__step">{e.step}</p></span>
|
|
</div>
|
|
</div>
|
|
<div className="evc__cols">
|
|
<div>
|
|
<p className="evc__where">{e.where}</p>
|
|
<p className="evc__desc">{e.desc}</p>
|
|
<Link href="/events" className="link-arrow link-arrow--spaced-lg">
|
|
Register Interest
|
|
</Link>
|
|
</div>
|
|
<div className="evc__schedule">
|
|
<ul className="evc__schedule-list">
|
|
{e.schedule.map((s) => (
|
|
<li key={s.label} className="evc__schedule-row">
|
|
<span className="evc__schedule-label">{s.label}</span>
|
|
<span className="evc__schedule-time">{s.time}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="evc__thumb">
|
|
<Image src="/img/guruimage.png" alt="" fill className="img-cover" sizes="96px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type MiniEvent = {
|
|
tag: string;
|
|
place: string;
|
|
date: string;
|
|
title: string;
|
|
desc: string;
|
|
image: string;
|
|
};
|
|
|
|
export function MiniEventCard({ e }: { e: MiniEvent }) {
|
|
return (
|
|
<div className="mec">
|
|
<div className="mec__head">
|
|
<span className="mec__tag">{e.tag}</span>
|
|
<div className="mec__thumb">
|
|
<Image src={e.image} alt={e.title} fill className="img-cover" sizes="96px" />
|
|
</div>
|
|
</div>
|
|
<div className="mec__meta">
|
|
<span className="mec__meta-item">
|
|
<span className="mec__icon">◉</span>
|
|
{e.place}
|
|
</span>
|
|
<span className="mec__meta-item">
|
|
<span className="mec__icon">▦</span>
|
|
{e.date}
|
|
</span>
|
|
</div>
|
|
<h3 className="mec__title">{e.title}</h3>
|
|
<p className="mec__desc">{e.desc}</p>
|
|
<Link href="/events" className="link-arrow link-arrow--spaced-lg">
|
|
Register Interest
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|