rockfic/next
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(components): create story info component for story page

Browse Source
This commit is contained in:
☙◦ The Tablet ❀ GamerGirlandCo ◦❧ 2023-12-01 17:55:28 -05:00
parent 61c57e4161
commit e574ef0b43
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
1 changed files with 180 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
components/story/view/storyInfo.vue Normal file
View File

@ -0,0 +1,180 @@
<script lang="ts" setup>
import { format } from "date-fns";
import { type SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
import icon from "~/components/icon.vue";
const story = inject<SingleChapterResult | null>("story");
console.log("storyyy--info", story);
const dark = inject<Ref<boolean>>("dark");
</script>
<template>
<a-card style="width: 45%; float: left; margin-right: 1.2em" v-if="!!story">
<a-descriptions
:label-style="{ fontWeight: 'bold' }"
:colon="false"
:column="1"
>
<a-descriptions-item label="Author">
<nuxt-link :to="`/user/${story?.author._id}`">{{
story?.author.username
}}</nuxt-link>
</a-descriptions-item>
<a-descriptions-item label="Bands">
<div
class="wrapLong"
v-for="(item, index) in story?.currentChapter.bands"
>
<span>
<nuxt-link :to="`/band/${item._id}`">
{{ item.name }}
</nuxt-link>
{{
(index < story!.currentChapter?.bands.length - 1 && ",&nbsp;") ||
""
}}
</span>
</div>
</a-descriptions-item>
<a-descriptions-item label="Genre(s)">
<div
class="wrapLong"
v-for="(item, index) in story?.currentChapter.genre"
>
<span>
{{ item }}
{{
(index < story!.currentChapter?.genre.length - 1 && ",&nbsp;") ||
""
}}
</span>
</div>
</a-descriptions-item>
<a-descriptions-item label="Relationship(s)">
<div
class="wrapLong"
v-for="(item, index) in story?.currentChapter.relationships"
>
<span>
{{ item.join("/") }}
{{
(index < story!.currentChapter?.relationships.length - 1 &&
",&nbsp;") ||
""
}}
</span>
</div>
</a-descriptions-item>
<a-descriptions-item label="Character(s)">
<div class="wrapLong">
<span v-for="(item, index) in story?.currentChapter.characters">
{{ item
}}{{
(index < story!.currentChapter?.characters.length - 1 &&
",&nbsp;") ||
""
}}
</span>
</div>
</a-descriptions-item>
<a-descriptions-item label="Rating">
{{
story?.currentChapter.nsfw ? "Adult" : "Suitable for most audiences"
}}
</a-descriptions-item>
<a-descriptions-item label="Summary">
<div v-html="story?.currentChapter.summary"></div>
</a-descriptions-item>
<a-descriptions-item label="Date posted">
<a-tooltip>
<template #title>
{{
format(
Date.parse(story?.currentChapter.posted as unknown as string),
"EEEE, LLL dd yyyy @ hh:mm:ss.SSS aa",
)
}}
</template>
{{
format(
Date.parse(story?.currentChapter.posted as unknown as string),
"yyyy-MM-dd",
)
}}
</a-tooltip>
</a-descriptions-item>
</a-descriptions>
<a-divider />
<div class="stats">
<span>
<span class="staticon">
<icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#ff2883"
:size="12"
name="heart"
/>
</span>
<span>
{{ story.favs }}
</span>
</span>
<span>
<span class="staticon">
<icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#1787d7"
:size="12"
name="book-open"
/>
</span>
<span>
{{ story.views }}
</span>
</span>
<span>
<span class="staticon">
<icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#51e07c"
:size="12"
name="thumbs-up"
/>
</span>
<span>
{{ story.recs }}
</span>
</span>
<span>
<span class="staticon">
<icon
:istyle="!dark ? 'solid' : 'regular'"
icolor="#c2d420"
:size="12"
name="download"
/>
</span>
<span>
{{ story.downloads }}
</span>
</span>
</div>
</a-card>
</template>
<style scoped>
.wrapLong {
display: flex;
flex-wrap: wrap;
}
.stats {
display: flex;
justify-content: space-evenly;
}
.stats > * {
display: flex;
}
.stats > * > * + * {
margin-left: 0.8em;
}
</style>