87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
// import { Button } from "./Button";
|
|
import { Image } from "./Image";
|
|
import { EventSetting } from "./EventSetting";
|
|
import styles from "./EventDescriptionCard.module.css";
|
|
|
|
interface Props {
|
|
name: string;
|
|
online: boolean;
|
|
location: string;
|
|
date: Date;
|
|
poster?: string;
|
|
registerLink?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
function getPlatformURL(platform: string) {
|
|
switch (platform) {
|
|
case "Twitch":
|
|
return "https://www.twitch.tv/uwcsclub";
|
|
case "Discord":
|
|
return "https://discord.gg/pHfYBCg";
|
|
case "Facebook":
|
|
return "https://www.facebook.com/uw.computerscienceclub";
|
|
case "Instagram":
|
|
return "https://www.instagram.com/uwcsclub/";
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @remarks
|
|
* - Child elements will display as the event's description
|
|
* - Assuming date prop is in EST
|
|
* - poster is the event's image name, including file ending (.jpg/.png/etc)
|
|
* - If event is online, location will be the platform, with capital first letter and no trailing spaces
|
|
* - ie. location="Discord"
|
|
* @todo
|
|
* get Link component
|
|
*/
|
|
export function EventDescriptionCard({
|
|
location,
|
|
poster,
|
|
name,
|
|
date,
|
|
online,
|
|
registerLink,
|
|
children,
|
|
}: Props) {
|
|
const platformURL = getPlatformURL(location);
|
|
|
|
return (
|
|
<article className={styles.card}>
|
|
{poster && <Image className={styles.poster} src={poster} alt={name} />}
|
|
|
|
<div className={styles.details}>
|
|
<h3 className={styles.name}>{name}</h3>
|
|
<h4 className={styles.setting}>
|
|
<EventSetting date={date} online={online} location={location} />
|
|
</h4>
|
|
<div className={styles.desc}>{children}</div>
|
|
<div className={styles.spacer}></div>
|
|
|
|
<footer>
|
|
{registerLink && (
|
|
<div className={styles.button}>
|
|
<button>
|
|
<a href={registerLink}>Register</a>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{online && platformURL && (
|
|
<a target="_blank" href={platformURL} rel="noreferrer">
|
|
<Image
|
|
className={styles.logo}
|
|
alt={location}
|
|
src={"logos/" + location + ".png"}
|
|
/>
|
|
</a>
|
|
)}
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|