Add extra CTA to no results behaviour

This commit is contained in:
Karsa
2023-05-24 12:14:54 +02:00
parent 7aacbf71d7
commit 7f2a5f36fe
@@ -1,8 +1,8 @@
<script setup lang="ts">
import { ref } from 'vue'
import { bird } from '../../../data/iconNodes'
import {ref} from 'vue'
import {bird} from '../../../data/iconNodes'
import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
import { useEventListener } from '@vueuse/core'
import {useEventListener} from '@vueuse/core'
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
defineProps<{
@@ -16,7 +16,7 @@ const Bird = createLucideIcon('bird', bird)
const flip = ref(false)
useEventListener(document, 'mousemove', (mouseEvent) => {
const { width, height, x, y } = birdIcon.value.getBoundingClientRect()
const {width, height, x, y} = birdIcon.value.getBoundingClientRect()
const centerX = (width / 2) + x
@@ -27,11 +27,17 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
<template>
<div class="no-results">
<Bird class="bird-icon" ref="birdIcon" :class="{ flip }"/>
<Bird class="bird-icon" ref="birdIcon" :class="{ flip }" :strokeWidth="1"/>
<h2 class="no-results-text">
No icons found for '{{ searchQuery }}'
</h2>
<VPButton text="Clear your search and try again" theme="alt" @click="$emit('clear')"/>
or
<VPButton text="Check if someone has already requested this icon"
theme="alt"
:href="`https://github.com/lucide-icons/lucide/issues?q=is%3Aopen+${searchQuery}`"
target="_blank"
/>
</div>
</template>
@@ -41,6 +47,7 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
flex-direction: column;
align-items: center;
}
.bird-icon {
width: 160px;
height: 160px;
@@ -59,6 +66,7 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
height: 240px;
}
}
.no-results-text {
line-height: 40px;
font-size: 24px;