feat: split jídel

feat: graf příjmů

client/src/components/MealGroupDays.tsx

@@ -0,0 +1,38 @@
+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;