From d59a73ab14747bb5d7f7c6fac472444dc3a428f6 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 19 Sep 2020 21:02:18 -0500
Subject: [PATCH] Style search list

---
 components/search.vue | 61 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 53 insertions(+), 8 deletions(-)

diff --git a/components/search.vue b/components/search.vue
index 54cb883..18895c4 100644
--- a/components/search.vue
+++ b/components/search.vue
@@ -6,7 +6,7 @@
                 ref="search"
                 v-model="query"
                 aria-label="Type here to Search"
-                class="appearance-none w-full text-white font-bold sm:text-5xl outline-none bg-transparent p-3"
+                class="appearance-none w-full text-white font-hairline sm:text-5xl outline-none bg-transparent p-3"
                 type="search"
                 placeholder="Type to Search"
                 autofocus
@@ -17,21 +17,66 @@
         </div>
         <div
             ref="search-container"
-            class="search-container relative w-full overflow-scroll scroll-elastic overscroll-contain"
+            class="search-container relative w-full"
         >
             <div class="search-wrapper flex justify-center pb-32">
-                <div class="search-scroller container w-full relative min-h-screen px-5">
+                <div class="search-scroller container w-full relative px-5">
 
                     <div class="search-results py-8">
 
-                        <div class="results-container">
-                            <div
+                        <ul class="results-container rounded-lg border neumorphic-shadow">
+                            <li
                                 v-for="(app, i) in results"
                                 :key="`${app.slug}-${i}`"
                             >
-                                {{ app.name }}
-                            </div>
-                        </div>
+                                <a
+                                    :href="`/app/${ app.slug }`"
+                                    class="block hover:neumorphic-shadow hover:bg-gradient-to-tr from-darkest to-darker focus:outline-none focus:bg-gray-50 transition duration-300 ease-in-out rounded-lg">
+                                    <div class="flex items-center px-4 py-4 sm:px-6">
+                                        <div class="min-w-0 flex-1 flex items-center">
+                                            <div class="flex-shrink-0">
+                                                <div
+                                                    class="h-12 w-12 rounded-full flex items-center justify-center neumorphic-shadow-inner"
+                                                >
+                                                    <div>{{ app.name.charAt(0) }}</div>
+                                                </div>
+                                            </div>
+                                            <div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
+                                                <div>
+                                                    <div class="text-sm leading-5 font-light truncate">{{ app.name }}</div>
+                                                    <div class="mt-2 flex items-center text-sm leading-5 text-gray-500">
+                                                        <span class="truncate">{{ app.text }}</span>
+                                                    </div>
+                                                </div>
+                                                <div class="hidden md:block">
+                                                    <div>
+                                                        <!-- <div class="text-sm leading-5 text-gray-900">
+                                                            Applied on
+                                                            <time datetime="2020-01-07">January 7, 2020</time>
+                                                        </div> -->
+                                                        <!-- <div class="mt-2 flex items-center text-sm leading-5 text-gray-500">
+                                                            {{ app.text }}
+                                                        </div> -->
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <!-- Heroicon name: chevron-right -->
+                                            <svg
+                                                class="h-5 w-5 text-gray-400"
+                                                viewBox="0 0 20 20"
+                                                fill="currentColor">
+                                                <path
+                                                    fill-rule="evenodd"
+                                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                                    clip-rule="evenodd" />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
                     </div>
 
                 </div>