64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { FC } from "react";
|
||
import styles from "../styling/achievements.module.scss";
|
||
|
||
export type EducationArgs = {
|
||
institution : string,
|
||
startDate : string,
|
||
title : string,
|
||
subtitle : string,
|
||
city : "Warsaw" | "London" | "Edinburgh",
|
||
endDate? : string,
|
||
notes? : string[]
|
||
useWith? : true,
|
||
}
|
||
|
||
const Education : FC<EducationArgs> = (props) => {
|
||
|
||
const getCountryEmoji = (): string => {
|
||
switch (props.city) {
|
||
case "Warsaw":
|
||
return ", Poland";
|
||
case "London":
|
||
return ", UK";
|
||
case "Edinburgh":
|
||
return ", UK";
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ fontSize: "1.1em" }} className={styles.education} data-aos={"fade-right"}>
|
||
<div>
|
||
<span className={styles.title}>{props.title}</span> in <b>{props.subtitle}</b>
|
||
<br/>
|
||
at <i>{props.institution}</i>
|
||
{props.notes?
|
||
<ul className={styles.notes}>
|
||
{props.notes.map((note, index) =>
|
||
<li key={index}>
|
||
{note}
|
||
</li>
|
||
)}
|
||
</ul>
|
||
: ""
|
||
}
|
||
</div>
|
||
<span className={styles.otherDetails}>
|
||
<div className={styles.location}>{props.city}{getCountryEmoji()}</div>
|
||
<hr/>
|
||
{props.endDate ?
|
||
<>
|
||
<i>From: </i>
|
||
<span style={{ float:"right" }}>{props.startDate}</span>
|
||
<br/>
|
||
<i>To: </i>
|
||
<span style={{ float:"right" }}>{props.endDate}</span>
|
||
</>:
|
||
"Since " + props.startDate
|
||
}
|
||
</span>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Education;
|