76 lines
2.1 KiB
TypeScript
76 lines
2.1 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 BaseProps {
|
|
name: string;
|
|
date: Date;
|
|
poster: string;
|
|
registerLink?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
type Props = BaseProps &
|
|
(
|
|
| { online: true; location: keyof typeof links }
|
|
| { online: false; location: string }
|
|
);
|
|
|
|
const links = {
|
|
Twitch: "https://www.twitch.tv/uwcsclub",
|
|
Discord: "https://discord.gg/pHfYBCg",
|
|
Facebook: "https://www.facebook.com/uw.computerscienceclub",
|
|
Instagram: "https://www.instagram.com/uwcsclub/",
|
|
};
|
|
|
|
/**
|
|
* @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(props: Props) {
|
|
return (
|
|
<article className={styles.card}>
|
|
<Image className={styles.poster} src={props.poster} alt={props.name} />
|
|
|
|
<div className={styles.details}>
|
|
<h3 className={styles.name}>{props.name}</h3>
|
|
|
|
<EventSetting
|
|
date={props.date}
|
|
online={props.online}
|
|
location={props.location}
|
|
/>
|
|
<div className={styles.desc}>{props.children}</div>
|
|
<div className={styles.spacer}></div>
|
|
|
|
<footer>
|
|
{props.registerLink && (
|
|
<div className={styles.button}>
|
|
<button>
|
|
<a href={props.registerLink}>Register</a>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{props.online && (
|
|
<a target="_blank" href={links[props.location]} rel="noreferrer">
|
|
<Image
|
|
className={styles.logo}
|
|
alt={props.location}
|
|
src={"logos/" + props.location + ".png"}
|
|
/>
|
|
</a>
|
|
)}
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|