mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-14 13:58:21 +00:00
Add extra CTA to no results behaviour
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user