addresed MR comments

This commit is contained in:
Linna Luo 2021-05-11 23:35:30 -04:00
parent 553bf7ebe5
commit df2da81dfd
1 changed files with 25 additions and 29 deletions

View File

@ -1,37 +1,35 @@
import React, { ReactElement } from "react"; import React, { ReactNode } from "react";
import styles from "./MiniEventCard.module.css"; import styles from "./MiniEventCard.module.css";
interface EventProps { interface Props {
title: string; name: string;
descriptionShort: string; descriptionShort: string;
descriptionLong: ReactElement; description: ReactNode;
location: string; location: string;
date: string; date: string;
time: string; time: string;
} }
const DropDownIcon = () => { const DropDownIcon = (
return ( <svg
<svg xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" width="14"
width="14" height="9"
height="9" viewBox="0 0 14 9"
viewBox="0 0 14 9" fill="none"
fill="none" className={styles.dropDownIcon}
className={styles.dropDownIcon} >
> <path
<path d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z"
d="M6.24407 8.12713C6.64284 8.58759 7.35716 8.58759 7.75593 8.12713L13.3613 1.65465C13.9221 1.00701 13.4621 0 12.6053 0H1.39467C0.537918 0 0.0778675 1.00701 0.638743 1.65465L6.24407 8.12713Z" fill="#1482E3"
fill="#1482E3" />
/> </svg>
</svg> );
);
};
export const MiniEventCard: React.FC<EventProps> = ({ export const MiniEventCard: React.FC<Props> = ({
title, name,
descriptionShort, descriptionShort,
descriptionLong, description,
location, location,
date, date,
time, time,
@ -40,19 +38,17 @@ export const MiniEventCard: React.FC<EventProps> = ({
<details className={styles.miniEventCard}> <details className={styles.miniEventCard}>
<summary> <summary>
<div onClick={(event) => event.preventDefault()}> <div onClick={(event) => event.preventDefault()}>
<h2 className={styles.eventTitle}>{title}</h2> <h2 className={styles.eventTitle}>{name}</h2>
<p className={styles.eventInfo}> <p className={styles.eventInfo}>
{location} | {date} | {time} {location} | {date} | {time}
</p> </p>
<p className={styles.shortDescription}>{descriptionShort}</p> <p className={styles.shortDescription}>{descriptionShort}</p>
</div> </div>
<p className={styles.details}> <p className={styles.details}>View details {DropDownIcon}</p>
View details <DropDownIcon />
</p>
</summary> </summary>
<p className={styles.longDescription}>{descriptionLong}</p> <div className={styles.longDescription}>{description}</div>
</details> </details>
); );
}; };