Add email subscribe to inline search items

components/email-subscribe.vue

@@ -10,14 +10,14 @@
             >
                 <label
                     v-show="isFocused"
-                    for="email-subscribe"
+                    :for="inputId"
                     class="block font-medium absolute"
                     style="top: -2em;"
                 >Email</label>
                 <div class="mt-1 relative rounded-md shadow-sm">
                     <div
                         v-show="isFocused"
-                        class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
+                        class="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none"
                     >
                         <!-- Heroicon name: mail -->
                         <svg
@@ -31,12 +31,9 @@
                         </svg>
                     </div>
                     <input
-                        id="email-subscribe"
+                        :id="inputId"
                         v-model="email"
-                        :class="[
+                        :class="inputClasslist"
-                            'form-input block w-full rounded-md bg-darker neumorphic-shadow py-1',
-                            isFocused ? 'pl-10' : 'placeholder-white text-center border border-transparent px-3'
-                        ]"
                         :placeholder="isFocused ? 'me@email.com' : 'Tell me when this changes'"
                         name="email-subscribe"
                         style="width: 230px;"
@@ -72,6 +69,10 @@ export default {
         notes: {
             type: String,
             default: ''
+        },
+        inputClassGroups: {
+            type: Object,
+            default: () => {}
         }
     },
     data: function () {
@@ -82,6 +83,33 @@ export default {
             feedbackMessage: null,
         }
     },
+    computed: {
+        inputId () {
+            return `email-subscribe-${this._uid}`
+        },
+        inputClasslist () {
+            const defaultClassGroups = {
+                general: 'form-input block w-full rounded-md py-1',
+                shadow: 'neumorphic-shadow',
+                bg: 'bg-darker',
+                focus: 'pl-8',
+                blur: 'placeholder-white text-center border border-transparent px-3',
+            }
+
+            const mergedClassGroups = {
+                ...defaultClassGroups,
+                ...this.inputClassGroups
+            }
+
+            if (this.isFocused) {
+                delete mergedClassGroups.blur
+            } else {
+                delete mergedClassGroups.focus
+            }
+
+            return Object.values(mergedClassGroups)
+        }
+    },
     methods: {
         async trySubmit () {
             console.log('Trying submit')

components/search.vue

@@ -42,6 +42,7 @@
                             <li
                                 v-for="(app, i) in results"
                                 :key="`${app.slug}-${i}`"
+                                class="relative"
                             >
                                 <a
                                     :href="`/app/${ app.slug }`"
@@ -63,17 +64,11 @@
                                                         <span class="">{{ app.text }}</span>
                                                     </div>
                                                 </div>
-                                                <div class="hidden md:block">
+                                                <!-- <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>
                                         <div>
@@ -90,6 +85,28 @@
                                         </div>
                                     </div>
                                 </a>
+                                <div
+                                    class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none"
+                                >
+
+                                    <div class="search-item-options-container h-full flex md:justify-end items-center py-4 md:px-12">
+
+                                        <div class="subscribe space-y-6 sm:space-x-6">
+                                            <EmailSubscribe
+                                                :app-name="app.name"
+                                                :input-class-groups="{
+                                                    shadow: 'hover:neumorphic-shadow',
+                                                    bg: '',
+                                                    focus: 'bg-transparent neumorphic-shadow pl-8',
+                                                    blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
+                                                }"
+                                                class="pointer-events-auto"
+                                            />
+                                        </div>
+
+                                    </div>
+
+                                </div>
                             </li>
                         </ul>
                     </div>
@@ -105,6 +122,8 @@ import scrollIntoView from 'scroll-into-view-if-needed'
 
 import appList from '~/assets/app-list.json'
 
+import EmailSubscribe from '~/components/email-subscribe.vue'
+
 // import overlayStore from './mixins/store'
 // import modalRouter from '~/components/modals/mixins/router'
 // import Card from '~/components/cards/Default.vue'
@@ -114,6 +133,9 @@ import appList from '~/assets/app-list.json'
 // import PlayCircle from '~/assets/svg/play-circle.svg?inline'
 
 export default {
+    components: {
+        EmailSubscribe
+    },
     props: {
         appList: {
             type: Array,