From 9d63f6a0d0bf2ba1a64aa38ee9521e944547d0fb Mon Sep 17 00:00:00 2001
From: Gabor Juhasz <gabor.juhasz@accretivetg.com>
Date: Thu, 28 Jul 2022 10:39:41 +0200
Subject: [PATCH] add more details

---
 components/Box.tsx    | 21 ++++++++++++++++++++-
 components/Detail.tsx | 21 ++++++++++++++++++++-
 types.ts              |  1 +
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/components/Box.tsx b/components/Box.tsx
index c6805d8..3bfd3f8 100644
--- a/components/Box.tsx
+++ b/components/Box.tsx
@@ -74,6 +74,17 @@ export const Box: FC<BoxProps> = ({ item, startOfDay, favorites, setDetailId })
                 );
               })}
           </ul>
+
+          <img
+            style={{ marginTop: 16 }}
+            src={
+              item.thumbnail.mobile.includes("http")
+                ? item.thumbnail.mobile
+                : `https://ordogkatlan.hu${item.thumbnail.mobile}`
+            }
+            loading="lazy"
+            alt={item.title}
+          />
         </div>
 
         <Gradient height={20} color={getBackground()} />
@@ -86,7 +97,15 @@ export const Box: FC<BoxProps> = ({ item, startOfDay, favorites, setDetailId })
             justifyContent: "space-between",
           }}
         >
-          <p>{dayjs(item.date).locale("hu").format("HH:mm")}</p>
+          <p>
+            <span>{dayjs(item.date).locale("hu").format("HH:mm")}</span>
+            <span style={{ paddingLeft: 4, paddingRight: 4 }}>-</span>
+            <span>
+              {dayjs(item.date + item.duration * 60 * 1000)
+                .locale("hu")
+                .format("HH:mm")}
+            </span>
+          </p>
           <p>{item.duration} perc</p>
         </div>
       </div>
diff --git a/components/Detail.tsx b/components/Detail.tsx
index c02278e..1d0252e 100644
--- a/components/Detail.tsx
+++ b/components/Detail.tsx
@@ -27,7 +27,15 @@ export const Detail: FC<DetailProps> = ({ item, favorites, setFavoriteState }) =
             justifyContent: "space-between",
           }}
         >
-          <p>{dayjs(item.date).locale("hu").format("HH:mm")}</p>
+          <p>
+            <span>{dayjs(item.date).locale("hu").format("HH:mm")}</span>
+            <span style={{ paddingLeft: 4, paddingRight: 4 }}>-</span>
+            <span>
+              {dayjs(item.date + item.duration * 60 * 1000)
+                .locale("hu")
+                .format("HH:mm")}
+            </span>
+          </p>
           <p>{item.duration} perc</p>
         </div>
 
@@ -44,6 +52,17 @@ export const Detail: FC<DetailProps> = ({ item, favorites, setFavoriteState }) =
             })}
         </ul>
 
+        <img
+          style={{ marginTop: 16 }}
+          src={
+            item.thumbnail.mobile.includes("http")
+              ? item.thumbnail.mobile
+              : `https://ordogkatlan.hu${item.thumbnail.mobile}`
+          }
+          loading="lazy"
+          alt={item.title}
+        />
+
         <p dangerouslySetInnerHTML={{ __html: item.description }} style={{ marginTop: 16 }} />
       </div>
 
diff --git a/types.ts b/types.ts
index ee4d8f9..ea047f5 100644
--- a/types.ts
+++ b/types.ts
@@ -9,6 +9,7 @@ export interface Item {
   village: undefined | { name: Village };
   stage: undefined | { name: Stage };
   labels: undefined | { name: Topic }[];
+  thumbnail: { mobile: string };
   // extra
   id: ID;
   date: number;