finxol.io
Personal blog
finxol.io
blog
feat(ui): add Bookmark component
+26
+26
app/components/content/Bookmark.vue
+26
app/components/content/Bookmark.vue
···
1
+
<script setup>
2
+
const 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-2 py-4 md:px-4 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
+
]"
17
+
>
18
+
<Icon name="ri:bookmark-fill" size="1.5rem" class="text-yellow-700" />
19
+
<div class="flex flex-col items-start justify-start">
20
+
<slot />
21
+
<span class="text-xs text-gray-400 dark:text-gray-600">
22
+
{{props.url}}
23
+
</span>
24
+
</div>
25
+
</NuxtLink>
26
+
</template>