From e08d6993c1bea69a9332c4be4b7ecb2d497a54df Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 24 Apr 2023 15:03:34 +0200
Subject: [PATCH] Displaying WPT thumbnails

---
 src/components/wpt/WptViewer.module.css | 5 +++++
 src/components/wpt/WptViewer.tsx        | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/wpt/WptViewer.module.css b/src/components/wpt/WptViewer.module.css
index c92754d..174d20e 100644
--- a/src/components/wpt/WptViewer.module.css
+++ b/src/components/wpt/WptViewer.module.css
@@ -6,3 +6,8 @@
   padding-top: 10px;
   font-style: italic;
 }
+
+.thumbnail {
+  padding-top: 10px;
+  text-align: center;
+}
diff --git a/src/components/wpt/WptViewer.tsx b/src/components/wpt/WptViewer.tsx
index 7997084..2311df8 100644
--- a/src/components/wpt/WptViewer.tsx
+++ b/src/components/wpt/WptViewer.tsx
@@ -73,6 +73,11 @@ const WptViewer: Component<Props> = ({ wptId }) => {
         content={
           <div>
             <div class={style.description}>{wpt().desc}</div>
+            <Show when={wpt().extensions?.thumbnailUrl}>
+              <div class={style.thumbnail}>
+                <img src={wpt().extensions?.thumbnailUrl}></img>
+              </div>
+            </Show>
             <Show when={wpt().extensions?.startTime}>
               <div class={style.date}>
                 {new Date(wpt().extensions?.startTime).toLocaleDateString()}