next/components/story/view/storyInfo.vue

<script lang="ts" setup>
	import { format } from "date-fns";
	import { type SingleChapterResult } from "@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>
				<span v-if="story.coAuthor">
					&nbsp;&&nbsp;<nuxt-link :to="`/user/${story.coAuthor._id}`">{{ story.coAuthor.username }}</nuxt-link>
				</span>
			</a-descriptions-item>
			<a-descriptions-item label="Bands">
				<div class="wrapLong" v-for="(item, index) in story?.currentChapter.bands">
					<span v-if="item">
						<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>