From 5cb5dd195f509d50484a1206137ec2158f535bac Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Fri, 20 Nov 2020 17:07:53 -0600
Subject: [PATCH] Add reports to game listings

---
 pages/game/_slug.vue | 83 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 72 insertions(+), 11 deletions(-)

diff --git a/pages/game/_slug.vue b/pages/game/_slug.vue
index 034b0dd..86259d1 100644
--- a/pages/game/_slug.vue
+++ b/pages/game/_slug.vue
@@ -14,17 +14,7 @@
                 />
             </div> -->
 
-            <div class="links space-y-6 sm:space-x-6">
-                <LinkButton
-                    v-for="(link, i) in app.relatedLinks"
-                    :key="i"
-                    :href="link.href"
-                    target="_blank"
-                    class=""
-                >{{ (i === 0) ? 'View' : link.label }}</LinkButton>
-            </div>
-
-            <small class="test-sm opacity-75">
+            <small class="test-sm opacity-75 mb-4">
                 <span>Data generously provided by </span>
                 <span>
                     <a
@@ -41,6 +31,77 @@
                 </span>
             </small>
 
+            <div class="links space-y-6 sm:space-x-6 mb-8">
+                <LinkButton
+                    v-for="(link, i) in app.relatedLinks"
+                    :key="i"
+                    :href="link.href"
+                    target="_blank"
+                    class=""
+                >{{ (i === 0) ? 'View' : link.label }}</LinkButton>
+            </div>
+
+            <h2 class="subtitle text-xl md:text-2xl font-bold py-6">
+                Reports
+            </h2>
+
+            <ul class="flex flex-col md:flex-row space-x-0 space-y-4 md:space-y-0 md:space-x-4">
+
+                <li
+                    v-for="(report, i) in app.reports"
+                    :key="`${app.slug}-${i}`"
+                    class="col-span-1 rounded-lg border w-full md:w-64"
+                >
+                    <div class="w-full flex items-center justify-between p-6">
+                        <div class="flex-1">
+                            <div class="space-x-3">
+                                <h3 class="text-sm leading-5 font-medium">{{ report['Specs'] }}</h3>
+                                <span class="flex-shrink-0 inline-block px-2 py-0.5 text-teal-800 text-xs leading-4 font-medium bg-teal-100 rounded-full">{{ report['FPS'] }}</span>
+                            </div>
+                            <p class="mt-1 text-sm leading-5">{{ report['Notes'] }}</p>
+                            <p
+                                v-if="report['Resolution'].length !== 0"
+                                class="mt-1 text-sm leading-5"
+                            >
+                                🖥 {{ report['Resolution'] }}
+                            </p>
+                            <p
+                                v-if="report['Settings'].length !== 0"
+                                class="mt-1 text-sm leading-5"
+                            >
+                                ⚙️ {{ report['Settings'] }}
+                            </p>
+                        </div>
+                    </div>
+                    <div
+                        v-if="report['Source'].length !== 0"
+                        class="border-t border-gray-200"
+                    >
+                        <div class="-mt-px flex">
+                            <div class="w-0 flex-1 flex border-r border-gray-200">
+                                <a
+                                    :href="report['Source']"
+                                    class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150"
+                                >
+                                    <!-- Heroicon name: mail -->
+                                    <svg
+                                        class="w-5 h-5"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 20 20"
+                                        fill="currentColor"
+                                    >
+                                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+                                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+                                    </svg>
+                                    <span class="ml-3 opacity-75">Source</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+
+            </ul>
+
             <div class="report-links py-24 shadow-none">
                 <!-- https://eric.blog/2016/01/08/prefilling-github-issues/ -->
                 <a