refactor(components): add lock icon

adds a lock icon beside restricted stories in listings if not logged in
This commit is contained in:
parent fa27a16e65
commit 43f16b026d
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C

@ -9,8 +9,10 @@
const { useToken } = theme;
const { token } = useToken();
const dark = inject<Ref<boolean>>("dark");
const { data } = useAuth();
let prop = defineProps<{ story: IStory; last?: boolean }>();
const idxo = (prop.last || false ? prop.story.chapters.length : 1) - 1;
// console.log("idx0->", idxo)
// log.debug("posti->", prop.story.chapters[ prop.story.chapters.length - 1 ]);
const shortDate = format(
Date.parse(
@ -29,9 +31,19 @@
<a-card>
<template #title>
<div style="padding-top: 1em; padding-bottom: 0.8em">
<div style="display: flex; justify-content: space-between">
<NuxtLink :to="`/story/${story._id}/${idxo + 1}`">
{{ story.title }}
</NuxtLink>
<a-tooltip placement="topLeft">
<template #title>
You'll need to log in to read this story. Register if you don't
already have an account -- it's free!
</template>
<icon v-if="!data?.user" istyle="solid" name="lock" />
</a-tooltip>
</div>
<div
style="display: flex; font-size: 0.9em; align-items: baseline"
class="headerthing"