39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
|
import { MealGroupDay } from "../../../types";
|
|
import { formatDateString, getDayOfWeek } from "../Utils";
|
|
import { getDayUrl } from "../routes";
|
|
|
|
type Props = {
|
|
days: MealGroupDay[];
|
|
};
|
|
|
|
/**
|
|
* Dny, kdy se jídlo skupiny jedlo, jako odkazy na přehled dne v nové záložce —
|
|
* aby šlo podívat se, co se ten den dělo, a stránku s doplňováním neopustit.
|
|
*/
|
|
const MealGroupDays = ({ days }: Readonly<Props>) => (
|
|
<div className="meal-group-days">
|
|
<div className="meal-group-days-title">
|
|
Otevřít den v nové záložce{days.some(day => day.incomplete) && ' · zvýrazněné dny mají neúplné údaje'}
|
|
</div>
|
|
<div className="meal-meta">
|
|
{days.map(day => (
|
|
<a
|
|
key={day.date}
|
|
href={getDayUrl(day.date)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`tag meal-group-day ${day.incomplete ? 'tag-missing' : ''}`}
|
|
title={day.incomplete ? 'Některé jídlo tohoto dne nemá kalorie, gramáž nebo živiny' : undefined}
|
|
>
|
|
{getDayOfWeek(day.date).substring(0, 2)} {formatDateString(day.date)}
|
|
<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default MealGroupDays;
|