finxol.io
1<script setup>
2const props = defineProps({
3 url: String
4});
5</script>
6
7<template>
8 <NuxtLink
9 :to="url"
10 :class="[
11 'flex flex-row items-center justify-start gap-4',
12 'px-4 py-4 md:px-6 md:py-6 not-prose',
13 'border border-gray-300 dark:border-gray-700 border-solid border-2 rounded-lg',
14 'bg-stone-200/25 hover:bg-stone-200/50 dark:bg-stone-700/25 dark:hover:bg-stone-700/50',
15 'transition-colors duration-200',
16 'bookmark-link'
17 ]"
18 >
19 <Icon name="ri:bookmark-fill" size="1.5rem" class="text-yellow-700" />
20 <div class="bookmark-content flex flex-col items-start justify-start font-bold">
21 <slot />
22 <span class="text-xs text-gray-400 dark:text-gray-600">
23 {{props.url}}
24 </span>
25 </div>
26 </NuxtLink>
27</template>
28
29<style scope>
30@media print {
31 a.bookmark-link::after {
32 content: "";
33 display: none;
34 }
35}
36</style>