davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1<script setup lang="ts">
2defineProps<{
3 /** Whether this is an exact match for the query */
4 isExactMatch?: boolean
5}>()
6</script>
7
8<template>
9 <article
10 class="group bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 transition-[border-color,background-color] duration-200 hover:(border-border-hover bg-bg-muted) cursor-pointer relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
11 :class="{
12 'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
13 }"
14 >
15 <!-- Glow effect for exact matches -->
16 <div
17 v-if="isExactMatch"
18 class="absolute -inset-px rounded-lg bg-gradient-to-r from-accent/0 via-accent/0 to-accent/10 opacity-100 blur-sm -z-1 pointer-events-none motion-reduce:opacity-50"
19 aria-hidden="true"
20 />
21 <slot />
22 </article>
23</template>