www-new/components/EventDescriptionCard.tsx

83 lines
2.0 KiB
TypeScript

import React from "react";
import { Button } from "./Button";
import { Image } from "./Image";
import { EventSetting } from "./EventSetting";
import styles from "./EventDescriptionCard.module.css";
import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
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;
}
}