@mundogamernetwork/shared-ui 1.3.6 → 1.3.7

package/locales/de.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Neueste",
+      "sort_popular": "Beliebteste",
       "seo": {
         "title_generic": "Key Campaigns"
       },

package/locales/en.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Most recent",
+      "sort_popular": "Most popular",
       "seo": {
         "title_generic": "Key Campaigns"
       },

package/locales/pt-BR.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Mais recentes",
+      "sort_popular": "Mais populares",
       "seo": {
         "title_generic": "Key Campaigns"
       },

package/locales/ro.json

@@ -45,6 +45,8 @@
       "upcoming": "Coming soon",
       "back": "Back",
       "search_placeholder": "Search campaigns...",
+      "sort_recent": "Cele mai recente",
+      "sort_popular": "Cele mai populare",
       "seo": {
         "title_generic": "Key Campaigns"
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/index.vue

@@ -75,14 +75,24 @@
 								</template>
 							</div>
 							<div class="bar">
-								<input
-									type="text"
-									v-model="searchTerm"
-									:placeholder="$t('keys.campaigns.search_placeholder')"
-								/>
-								<button type="button">
-									<MGIcon icon="search" />
-								</button>
+								<select
+									class="platform-select sort-mode-select"
+									:value="sortMode"
+									@change="setSortMode(($event.target as HTMLSelectElement).value as 'recent' | 'popular')"
+								>
+									<option value="recent">{{ $t("keys.campaigns.sort_recent") }}</option>
+									<option value="popular">{{ $t("keys.campaigns.sort_popular") }}</option>
+								</select>
+								<div class="search-box">
+									<input
+										type="text"
+										v-model="searchTerm"
+										:placeholder="$t('keys.campaigns.search_placeholder')"
+									/>
+									<button type="button">
+										<MGIcon icon="search" />
+									</button>
+								</div>
 							</div>
 						</div>
 
@@ -405,6 +415,7 @@ const platformList = ref<Array<{ id: number; name: string; slug: string }>>([])
 const activeFilter = ref<number | null>(null)
 const activePlatformFilter = ref<number | null>(null)
 const redeemedStatusFilter = ref<number | null>(null)
+const sortMode = ref<"recent" | "popular">("recent")
 
 // ------------------------------------------------------------------
 // Data
@@ -545,6 +556,7 @@ async function loadCampaigns(page = 1) {
 		per_page: perPage.value,
 		sort: "id",
 		order: "desc",
+		sort_mode: sortMode.value,
 	}
 
 	if (activeFilter.value !== null) params["filter[type_id]"] = activeFilter.value
@@ -685,6 +697,14 @@ function setPlatformFilter(platformId: number | null) {
 	loadCampaigns(1)
 }
 
+function setSortMode(mode: "recent" | "popular") {
+	if (sortMode.value === mode) return
+	sortMode.value = mode
+	currentPage.value = 1
+	hasMoreItems.value = true
+	loadCampaigns(1)
+}
+
 const loadMoreItems = async () => {
 	if (!hasMoreItems.value || loading.value || loadingMore.value) return
 	await loadCampaigns(currentPage.value + 1)
@@ -1095,6 +1115,18 @@ onUnmounted(() => {
 				}
 
 				.bar {
+					position: relative;
+					display: flex;
+					align-items: center;
+					gap: 8px;
+
+					.sort-mode-select {
+						flex-shrink: 0;
+						height: 44px;
+					}
+				}
+
+				.search-box {
 					position: relative;
 					display: flex;
 					width: 339px;
@@ -1273,6 +1305,7 @@ onUnmounted(() => {
 				flex-direction: column;
 				gap: 12px;
 				.bar { width: 100%; }
+				.search-box { flex: 1; width: auto; }
 			}
 			.cards {
 				flex-direction: column;