From e574ef0b430939b19358c18658e317935a15da20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Fri, 1 Dec 2023 17:55:28 -0500
Subject: [PATCH] feat(components): create story info component for story page

---
 components/story/view/storyInfo.vue | 180 ++++++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 components/story/view/storyInfo.vue

diff --git a/components/story/view/storyInfo.vue b/components/story/view/storyInfo.vue
new file mode 100644
index 0000000..9e3ca86
--- /dev/null
+++ b/components/story/view/storyInfo.vue
@@ -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>