add more details

JuhG · Jul 28, 2022 · 9d63f6a · 9d63f6a
1 parent 80ba9cb
commit 9d63f6a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;