@mundogamernetwork/shared-ui 1.0.0

package/pages/faq.vue

@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { isFaqOpened, faq } = storeToRefs(institutionalStore);
+
+const searchTerm = ref("");
+
+const showModal = ref(false);
+const modalMessage = ref("");
+const closeModal = () => {
+	showModal.value = false;
+};
+
+async function fetchFaqs() {
+	try {
+		const config = useRuntimeConfig();
+		const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+		await institutionalStore.fetchFaq({
+			filter: {
+				term: searchTerm.value,
+				status: 1,
+				platform_id: systemId,
+			},
+			page: "1",
+			per_page: "all",
+		});
+	} catch (error: any) {
+		const errorMessage = error.response?.data?.message;
+		modalMessage.value = errorMessage ?? "Could not load FAQs";
+		showModal.value = true;
+	}
+}
+
+onMounted(async () => {
+	fetchFaqs();
+});
+
+function toggleFaq(index: number) {
+	institutionalStore.toggleFaq(index);
+}
+</script>
+
+<template>
+	<div id="faq" class="container faq">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.faq.title") }}</h1>
+					<p>{{ $t("more.faq.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div class="search">
+							<input
+								v-model="searchTerm"
+								type="text"
+								:placeholder="$t('more.faq.text_search')"
+								@keyup.enter="fetchFaqs"
+							/>
+							<button @click="fetchFaqs">
+								<MGIcon icon="search" />
+							</button>
+						</div>
+
+						<div v-if="faq && faq.data && faq.data.data">
+							<div v-if="faq.data.data.length === 0">
+								{{ $t("more.faq.no_data") }}
+							</div>
+							<div
+								v-for="(item, index) in faq.data.data"
+								v-else
+								:key="index"
+								class="faq__info"
+							>
+								<button
+									aria-controls="info"
+									class="faq__info__toggler"
+									@click="toggleFaq(index)"
+								>
+									{{ item.localized_title }}
+									<MGIcon icon="chevron-down" :class="{ rotate: isFaqOpened[index] }" />
+								</button>
+								<div v-if="isFaqOpened[index]" class="faq__info__text open">
+									{{ item.localized_description }}
+								</div>
+							</div>
+
+							<div class="press">
+								<div class="press__info">
+									<div class="press__info--title">
+										{{ $t("more.faq.card_title") }}
+									</div>
+									<div class="press__info--text">
+										{{ $t("more.faq.card_text") }}
+										<span class="press__info--text--span">
+											<a href="mailto:central@mundogamer.network">central@mundogamer.network</a>
+										</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
+			<div class="modal-content">
+				<p class="modal-message">{{ modalMessage }}</p>
+				<button class="modal-close-btn" @click="closeModal">
+					{{ $t("more.contact.message_popup.btn_close") }}
+				</button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.faq {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.875rem;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-faq.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.search {
+		position: relative;
+		display: flex;
+		width: 100%;
+		margin-bottom: 32px;
+		height: 48px;
+		background: var(--search-bar-bg);
+		align-items: center;
+		gap: 4px;
+
+		input {
+			width: 100%;
+			height: 48px;
+			padding: 0.25rem 1rem;
+			border: 0;
+			border-bottom: 1px solid var(--search-bar-border-color);
+			outline: 0;
+			height: 32px;
+			padding-left: 0px;
+			background: var(--search-bar-bg);
+			font-size: 1rem;
+			color: var(--search-bar-fg);
+		}
+
+		button {
+			position: relative;
+			right: 1px;
+			width: 48px;
+			height: 48px;
+			border: 0;
+			outline: 0;
+			background: var(--search-bar-bg);
+			color: var(--search-bar-fg);
+			transition: 0.15s ease-in-out;
+			z-index: 1;
+
+			&:hover {
+				color: var(--search-bar-active-fg);
+			}
+		}
+	}
+
+	&__info {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 8px;
+		align-self: stretch;
+		margin-bottom: 16px;
+
+		&__toggler {
+			color: var(--card-cover-title);
+			justify-content: space-between;
+			display: flex;
+			height: 32px;
+			padding-left: 16px;
+			align-items: center;
+			align-self: stretch;
+			border-left: 2px solid var(--chip-text);
+			transition: color 0.5s ease-out;
+			background: transparent;
+			border-top: 0;
+			border-bottom: 0;
+			border-right: 0;
+
+			.rotate {
+				transform: rotate(180deg);
+				transition: 0.5s;
+			}
+
+			&:hover {
+				color: var(--faq-toggler-active-fg);
+			}
+		}
+
+		&__text {
+			color: var(--inactive);
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+
+			&.open {
+				display: block;
+			}
+		}
+	}
+
+	.press {
+		background-color: var(--chip-background-2);
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+		align-self: stretch;
+		margin-bottom: 24px;
+		margin-top: 24px;
+
+		&__info {
+			&--title {
+				color: var(--card-cover-title);
+				font-size: 14px;
+				font-weight: 600;
+				line-height: 20px;
+				margin-bottom: 16px;
+			}
+
+			&--text {
+				color: var(--card-cover-title);
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 20px;
+
+				&--span {
+					color: var(--chip-text);
+					text-decoration-line: underline;
+				}
+			}
+		}
+	}
+}
+
+.modal-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 1000;
+
+	.modal-content {
+		background-color: #0a0a0a;
+		padding: 2rem;
+		max-width: 500px;
+		border-radius: 8px;
+		text-align: center;
+	}
+
+	.modal-message {
+		margin-bottom: 1.5rem;
+		font-size: 1.1rem;
+		color: #ffffff;
+	}
+
+	.modal-close-btn {
+		padding: 0.5rem 1rem;
+		font-size: 1rem;
+		border: 1px solid #060606;
+		border-radius: 4px;
+		background-color: #060606;
+		color: #ffffff;
+		cursor: pointer;
+
+		&:hover {
+			border-color: cyan;
+		}
+	}
+}
+</style>

package/pages/health-check.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+definePageMeta({ layout: "default" });
+</script>
+
+<template>
+	<div id="health-check" class="health-check">
+		<p>OK</p>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.health-check {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 200px;
+	font-size: 24px;
+	color: var(--card-cover-title);
+}
+</style>

package/pages/icons.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+definePageMeta({ layout: "default" });
+
+const icons = [
+	"home", "search", "message", "bell", "gear", "user", "chevron-left",
+	"chevron-right", "chevron-down", "chevron-up", "close", "menu",
+	"link", "star", "heart", "share", "edit", "trash", "plus", "minus",
+	"check", "info", "warning", "error", "calendar", "clock", "download",
+	"upload", "filter", "sort", "grid", "list", "eye", "eye-off",
+	"lock", "unlock", "mail", "phone", "map", "globe", "flag",
+];
+</script>
+
+<template>
+	<div id="icons" class="icons-page">
+		<h1>Icon Library</h1>
+		<div class="icons-grid">
+			<div v-for="icon in icons" :key="icon" class="icon-item">
+				<MGIcon :icon="icon" size="2x" />
+				<span>{{ icon }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.icons-page {
+	padding: 32px;
+
+	h1 {
+		font-size: 24px;
+		font-weight: 600;
+		color: var(--card-cover-title);
+		margin-bottom: 24px;
+	}
+
+	.icons-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+		gap: 16px;
+	}
+
+	.icon-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		padding: 16px;
+		background: var(--chip-background-2);
+		color: var(--inactive);
+
+		span {
+			font-size: 11px;
+			text-align: center;
+		}
+	}
+}
+</style>

package/pages/magazine/[slug].vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { getMagazine, getMagazinePages, trackMagazineAnalytic } from "../../services/institutionalService";
+
+definePageMeta({ layout: "default" });
+
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const magazine = ref<any>(null);
+const pages = ref<any[]>([]);
+const loading = ref(true);
+const currentPageIndex = ref(0);
+
+async function fetchMagazineData() {
+	loading.value = true;
+	try {
+		const [magResponse, pagesResponse] = await Promise.all([
+			getMagazine(slug),
+			getMagazinePages(slug),
+		]);
+		magazine.value = magResponse.data?.data || magResponse.data;
+		pages.value = pagesResponse.data?.data || pagesResponse.data || [];
+
+		trackMagazineAnalytic(slug, "view").catch(() => {});
+	} catch {
+		throw createError({ statusCode: 404, statusMessage: "Magazine not found" });
+	} finally {
+		loading.value = false;
+	}
+}
+
+function nextPage() {
+	if (currentPageIndex.value < pages.value.length - 1) {
+		currentPageIndex.value++;
+	}
+}
+
+function prevPage() {
+	if (currentPageIndex.value > 0) {
+		currentPageIndex.value--;
+	}
+}
+
+const currentPage = computed(() => pages.value[currentPageIndex.value] || null);
+
+onMounted(() => {
+	fetchMagazineData();
+});
+</script>
+
+<template>
+	<div id="magazine-detail" class="container magazine-detail">
+		<div v-if="loading" class="loading">
+			<p>{{ $t("components.loading") }}</p>
+		</div>
+
+		<template v-else-if="magazine">
+			<div class="magazine-header">
+				<h1>{{ magazine.title }}</h1>
+				<p v-if="magazine.description">{{ magazine.description }}</p>
+				<div class="meta">
+					<span v-if="magazine.edition_number">{{ $t("more.magazine.edition") }} #{{ magazine.edition_number }}</span>
+					<span>{{ magazine.release_date || magazine.created_at }}</span>
+				</div>
+			</div>
+
+			<div v-if="pages.length > 0" class="magazine-reader">
+				<div class="page-content">
+					<img
+						v-if="currentPage?.image_url"
+						:src="currentPage.image_url"
+						:alt="`Page ${currentPageIndex + 1}`"
+						class="page-image"
+					/>
+					<div v-else-if="currentPage?.content" class="page-text" v-html="currentPage.content"></div>
+				</div>
+
+				<div class="page-controls">
+					<button :disabled="currentPageIndex <= 0" @click="prevPage">
+						<MGIcon icon="chevron-left" />
+						{{ $t("components.previous") }}
+					</button>
+					<span>{{ currentPageIndex + 1 }} / {{ pages.length }}</span>
+					<button :disabled="currentPageIndex >= pages.length - 1" @click="nextPage">
+						{{ $t("components.next") }}
+						<MGIcon icon="chevron-right" />
+					</button>
+				</div>
+			</div>
+
+			<div v-else-if="magazine.pdf_url" class="magazine-pdf">
+				<a :href="magazine.pdf_url" target="_blank" rel="noopener" class="download-btn">
+					{{ $t("more.magazine.download_pdf") }}
+				</a>
+			</div>
+		</template>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.magazine-detail {
+	color: var(--inactive);
+	padding: 24px 0;
+
+	.magazine-header {
+		text-align: center;
+		margin-bottom: 32px;
+
+		h1 {
+			font-size: 24px;
+			font-weight: 600;
+			color: var(--card-cover-title);
+			margin-bottom: 8px;
+		}
+
+		p {
+			font-size: 14px;
+			line-height: 20px;
+			max-width: 600px;
+			margin: 0 auto 12px;
+		}
+
+		.meta {
+			display: flex;
+			justify-content: center;
+			gap: 16px;
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+		}
+	}
+
+	.magazine-reader {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+
+	.page-content {
+		min-height: 500px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: var(--chip-background-2);
+		margin-bottom: 16px;
+
+		.page-image {
+			max-width: 100%;
+			max-height: 80vh;
+			object-fit: contain;
+		}
+
+		.page-text {
+			padding: 32px;
+			font-size: 14px;
+			line-height: 22px;
+		}
+	}
+
+	.page-controls {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 24px;
+
+		button {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+			padding: 8px 16px;
+			border: 1px solid var(--search-bar-border-color);
+			background: transparent;
+			color: var(--card-cover-title);
+			cursor: pointer;
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: default;
+			}
+		}
+
+		span {
+			font-size: 14px;
+			color: var(--secondary-info-fg);
+		}
+	}
+
+	.magazine-pdf {
+		text-align: center;
+
+		.download-btn {
+			display: inline-block;
+			padding: 12px 32px;
+			border: 1px solid var(--chip-text);
+			color: var(--chip-text);
+			text-decoration: none;
+			font-size: 14px;
+
+			&:hover {
+				background: var(--chip-text);
+				color: var(--chip-background-2);
+			}
+		}
+	}
+
+	.loading {
+		text-align: center;
+		padding: 64px;
+	}
+}
+</style>