138 lines
4.2 KiB
TypeScript
138 lines
4.2 KiB
TypeScript
import Chip from "components/Chip";
|
|
import ToolTip from "components/ToolTip";
|
|
import {
|
|
Enum_Componenttranslationschronologyitem_Status,
|
|
GetChronologyItemsQuery,
|
|
GetWebsiteInterfaceQuery,
|
|
} from "graphql/operations-types";
|
|
import { getStatusDescription } from "queries/helpers";
|
|
|
|
export type ChronologyItemComponentProps = {
|
|
item: GetChronologyItemsQuery["chronologyItems"]["data"][number];
|
|
displayYear: boolean;
|
|
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"];
|
|
};
|
|
|
|
export default function ChronologyItemComponent(
|
|
props: ChronologyItemComponentProps
|
|
): JSX.Element {
|
|
const { langui } = props;
|
|
|
|
function generateAnchor(year: number, month: number, day: number): string {
|
|
let result = "";
|
|
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;
|
|
}
|
|
return year.toString();
|
|
}
|
|
|
|
function generateDate(month: number, day: number): string {
|
|
const lut = [
|
|
"Jan",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
];
|
|
|
|
let result = "";
|
|
if (month) {
|
|
result += lut[month - 1];
|
|
if (day) {
|
|
result += ` ${day}`;
|
|
}
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="grid place-content-start grid-rows-[auto_1fr] grid-cols-[4em] py-4 px-8 rounded-2xl target:bg-mid target:py-8 target:my-4"
|
|
id={generateAnchor(
|
|
props.item.attributes.year,
|
|
props.item.attributes.month,
|
|
props.item.attributes.day
|
|
)}
|
|
>
|
|
{props.displayYear && (
|
|
<p className="text-lg mt-[-.2em] font-bold">
|
|
{generateYear(
|
|
props.item.attributes.displayed_date,
|
|
props.item.attributes.year
|
|
)}
|
|
</p>
|
|
)}
|
|
|
|
<p className="col-start-1 text-dark text-sm">
|
|
{generateDate(props.item.attributes.month, props.item.attributes.day)}
|
|
</p>
|
|
|
|
<div className="col-start-2 row-start-1 row-span-2 grid gap-4">
|
|
{props.item.attributes.events.map((event) => (
|
|
<div className="m-0" key={event.id}>
|
|
{event.translations.map((translation) => (
|
|
<>
|
|
<div className="place-items-start place-content-start grid grid-flow-col gap-2">
|
|
{translation.status !==
|
|
Enum_Componenttranslationschronologyitem_Status.Done && (
|
|
<ToolTip
|
|
content={getStatusDescription(translation.status, langui)}
|
|
maxWidth={"20rem"}
|
|
>
|
|
<Chip>{translation.status}</Chip>
|
|
</ToolTip>
|
|
)}
|
|
{translation.title ? <h3>{translation.title}</h3> : ""}
|
|
</div>
|
|
|
|
{translation.description && (
|
|
<p
|
|
className={
|
|
event.translations.length > 1
|
|
? "before:content-['-'] before:text-dark before:inline-block before:w-4 before:ml-[-1em] mt-2 whitespace-pre-line"
|
|
: "whitespace-pre-line"
|
|
}
|
|
>
|
|
{translation.description}
|
|
</p>
|
|
)}
|
|
{translation.note ? (
|
|
<em>{`Notes: ${translation.note}`}</em>
|
|
) : (
|
|
""
|
|
)}
|
|
</>
|
|
))}
|
|
|
|
<p className="text-dark text-xs grid place-self-start grid-flow-col gap-1 mt-1">
|
|
{event.source.data ? (
|
|
`(${event.source.data.attributes.name})`
|
|
) : (
|
|
<>
|
|
<span className="material-icons !text-sm">warning</span>No
|
|
sources!
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|