Computer Science Club of the University of Waterloo's website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
www-new/components/EventDescriptionCard.tsx

84 lines
2.0 KiB

import React from "react";
import { Button } from "./Button";
import { EventSetting } from "./EventSetting";
import { Image } from "./Image";
import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
import styles from "./EventDescriptionCard.module.css";
interface Props {
name: string;
short: string;
online: boolean;
location: string;
date: Date;
poster?: string;
registerLink?: string;
}
/**
* @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,
short,
date,
online,
registerLink,
}: Props) {
const Icon = getIcon(location);
return (
<article className={styles.card}>
{poster && <Image className={styles.poster} src={poster} alt={name} />}
<div className={styles.details}>
<h1 className={styles.name}>{name}</h1>
<h2 className={styles.setting}>
<EventSetting date={date} online={online} location={location} />
</h2>
<p className={styles.desc}>{short}</p>
<footer>
{registerLink && (
<div className={styles.button}>
<Button isLink={true} href={registerLink} size="small">
Register
</Button>
</div>
)}
{online && Icon && (
<div className={styles.logo}>
<Icon color="blue" size="small" />
</div>
)}
</footer>
</div>
</article>
);
}
function getIcon(platform: string) {
switch (platform) {
case "Twitch":
return Twitch;
case "Discord":
return Discord;
case "Instagram":
return Instagram;
case "Facebook":
return Facebook;
default:
return null;
}
}