Add email subscribe to inline search items

This commit is contained in:
Sam Carlton 2020-11-13 16:14:27 -06:00
parent 74670b4fe6
commit f6e1c213c3
2 changed files with 66 additions and 16 deletions

View file

@ -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,