124 lines
3.1 KiB
TypeScript
124 lines
3.1 KiB
TypeScript
import styles from "styles/Chronology/ChronologyItemComponent.module.css";
|
|
import {
|
|
ChronologyItem,
|
|
ChronologyItemsEvent,
|
|
ChronologyItemsEventTranslation,
|
|
} from "queries/chronology/overview";
|
|
|
|
export type ChronologyItemComponentProps = {
|
|
item: ChronologyItem;
|
|
displayYear: boolean;
|
|
};
|
|
|
|
export default function ChronologyItemComponent(
|
|
props: ChronologyItemComponentProps
|
|
) {
|
|
function generateAnchor(
|
|
year: number,
|
|
month: number,
|
|
day: number,
|
|
event?: number
|
|
): string {
|
|
let result: string = "";
|
|
result += year;
|
|
if (month) result += "-" + month.toString().padStart(2, "0");
|
|
if (day) result += "-" + day.toString().padStart(2, "0");
|
|
return result;
|
|
}
|
|
|
|
function generateYear(displayed_date: string, year: number): string {
|
|
if (displayed_date) {
|
|
return displayed_date;
|
|
} else {
|
|
return year.toString();
|
|
}
|
|
}
|
|
|
|
function generateDate(month: number, day: number): string {
|
|
let lut = [
|
|
"Jan",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
];
|
|
|
|
let result: string = "";
|
|
if (month) {
|
|
result += lut[month - 1];
|
|
if (day) {
|
|
result += " " + day.toString().padStart(2, "0");
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={styles.chronologyItem}
|
|
id={generateAnchor(
|
|
props.item.attributes.year,
|
|
props.item.attributes.month,
|
|
props.item.attributes.day
|
|
)}
|
|
>
|
|
{props.displayYear ? (
|
|
<p className={styles.year}>
|
|
{generateYear(
|
|
props.item.attributes.displayed_date,
|
|
props.item.attributes.year
|
|
)}
|
|
</p>
|
|
) : (
|
|
""
|
|
)}
|
|
|
|
<p className={styles.date}>
|
|
{generateDate(props.item.attributes.month, props.item.attributes.day)}
|
|
</p>
|
|
|
|
<div className={styles.events}>
|
|
{props.item.attributes.events.map((event: ChronologyItemsEvent) => (
|
|
<div className={styles.event} key={event.id}>
|
|
{event.translations.map(
|
|
(translation: ChronologyItemsEventTranslation) => (
|
|
<>
|
|
{translation.title ? <h3>{translation.title}</h3> : ""}
|
|
|
|
{translation.description ? (
|
|
<p
|
|
className={
|
|
event.translations.length > 1 ? styles.bulletItem : ""
|
|
}
|
|
>
|
|
{translation.description}
|
|
|
|
</p>
|
|
) : (
|
|
""
|
|
)}
|
|
{translation.note ? <em>{"Notes: " + translation.note}</em> : ""}
|
|
</>
|
|
)
|
|
)}
|
|
|
|
<p className={styles.source}>
|
|
{event.source.data
|
|
? "(" + event.source.data.attributes.name + ")"
|
|
: ""}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|