next/components/story/view/storyInfo.vue

<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>