feat: add not found screen

Author: ncarazon

front_end/messages/cs.json

@@ -1811,5 +1811,9 @@
   "tournamentUnitPlural": "{unit, select, minute {minut} hour {hodin} day {dní} week {týdnů} month {měsíců} year {let} other {dní}}",
   "tournamentQuestionsCount": "{count, plural, one {<num>#</num> otázka} other {<num>#</num> otázek}}",
   "tournamentQuestionsCountUpper": "<n>{count}</n> OTÁZKY",
+  "tournamentsEmptySearchTitle": "Nebyly nalezeny žádné výsledky",
+  "tournamentsEmptySearchBody": "Zkuste jiný vyhledávací výraz nebo vymažte vyhledávání.",
+  "tournamentsEmptyDefaultTitle": "Zobrazeno {count} turnajů",
+  "tournamentsEmptyDefaultBody": "Zkontrolujte později nebo vyzkoušejte jinou kartu.",
   "othersCount": "Ostatní ({count})"
 }

front_end/messages/en.json

@@ -1805,5 +1805,9 @@
   "tournamentUnitPlural": "{unit, select, minute {minutes} hour {hours} day {days} week {weeks} month {months} year {years} other {days}}",
   "tournamentQuestionsCount": "{count, plural, one {<num>#</num> question} other {<num>#</num> questions}}",
   "tournamentQuestionsCountUpper": "<n>{count}</n> QUESTIONS",
+  "tournamentsEmptySearchTitle": "No results found",
+  "tournamentsEmptySearchBody": "Try a different search term, or clear the search.",
+  "tournamentsEmptyDefaultTitle": "{count} tournaments shown",
+  "tournamentsEmptyDefaultBody": "Check back later or try another tab.",
   "none": "none"
 }

front_end/messages/es.json

@@ -1811,5 +1811,9 @@
   "tournamentUnitPlural": "{unit, select, minute {minutos} hour {horas} day {días} week {semanas} month {meses} year {años} other {días}}",
   "tournamentQuestionsCount": "{count, plural, one {<num>#</num> pregunta} other {<num>#</num> preguntas}}",
   "tournamentQuestionsCountUpper": "<n>{count}</n> PREGUNTAS",
+  "tournamentsEmptySearchTitle": "No se encontraron resultados",
+  "tournamentsEmptySearchBody": "Prueba un término de búsqueda diferente o borra la búsqueda.",
+  "tournamentsEmptyDefaultTitle": "{count} torneos mostrados",
+  "tournamentsEmptyDefaultBody": "Vuelve más tarde o prueba otra pestaña.",
   "othersCount": "Otros ({count})"
 }

front_end/messages/pt.json

@@ -1809,5 +1809,9 @@
   "tournamentUnitPlural": "{unit, select, minute {minutos} hour {horas} day {dias} week {semanas} month {meses} year {anos} other {dias}}",
   "tournamentQuestionsCount": "{count, plural, one {<num>#</num> pergunta} other {<num>#</num> perguntas}}",
   "tournamentQuestionsCountUpper": "<n>{count}</n> PERGUNTAS",
+  "tournamentsEmptySearchTitle": "Nenhum resultado encontrado",
+  "tournamentsEmptySearchBody": "Tente um termo de pesquisa diferente ou limpe a pesquisa.",
+  "tournamentsEmptyDefaultTitle": "{count} torneios mostrados",
+  "tournamentsEmptyDefaultBody": "Volte mais tarde ou tente outra aba.",
   "othersCount": "Outros ({count})"
 }

front_end/messages/zh-TW.json

@@ -1808,5 +1808,9 @@
   "tournamentUnitPlural": "{unit, select, minute {分鐘} hour {小時} day {天} week {週} month {月} year {年} other {天}}",
   "tournamentQuestionsCount": "{count, plural, one {<num>#</num> 個問題} other {<num>#</num> 個問題}}",
   "tournamentQuestionsCountUpper": "<n>{count}</n> 題問題",
+  "tournamentsEmptySearchTitle": "找不到結果",
+  "tournamentsEmptySearchBody": "嘗試使用不同的搜索詞，或清除搜索。",
+  "tournamentsEmptyDefaultTitle": "顯示 {count} 個比賽",
+  "tournamentsEmptyDefaultBody": "稍後再查看或嘗試其他標籤。",
   "withdrawAfterPercentSetting2": "問題總生命周期後撤回"
 }

front_end/messages/zh.json

@@ -1813,5 +1813,9 @@
   "tournamentUnitPlural": "{unit, select, minute {分钟} hour {小时} day {天} week {周} month {个月} year {年} other {天}}",
   "tournamentQuestionsCount": "{count, plural, one {<num>#</num> 个问题} other {<num>#</num> 个问题}}",
   "tournamentQuestionsCountUpper": "<n>{count}</n> 题目",
+  "tournamentsEmptySearchTitle": "未找到结果",
+  "tournamentsEmptySearchBody": "尝试不同的搜索词，或清除搜索。",
+  "tournamentsEmptyDefaultTitle": "显示了 {count} 场比赛",
+  "tournamentsEmptyDefaultBody": "稍后再查看或尝试其他选项卡。",
   "othersCount": "其他（{count}）"
 }

front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_results.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import React from "react";
+
+import cn from "@/utils/core/cn";
+
+import { useTournamentsSection } from "./tournaments_provider";
+import { TOURNAMENTS_SEARCH } from "../constants/query_params";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const TournamentsResults: React.FC<Props> = ({ children, className }) => {
+  const t = useTranslations();
+  const { count } = useTournamentsSection();
+  const params = useSearchParams();
+
+  const q = (params.get(TOURNAMENTS_SEARCH) ?? "").trim();
+  const isSearching = q.length > 0;
+
+  type PlainKey = Parameters<typeof t>[0];
+
+  if (count > 0) {
+    return <div className={className}>{children}</div>;
+  }
+
+  const titleKey = (
+    isSearching ? "tournamentsEmptySearchTitle" : "tournamentsEmptyDefaultTitle"
+  ) as PlainKey;
+
+  const bodyKey = (
+    isSearching ? "tournamentsEmptySearchBody" : "tournamentsEmptyDefaultBody"
+  ) as PlainKey;
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center",
+        "min-h-[260px] lg:min-h-[360px]",
+        className
+      )}
+    >
+      <div className="text-center">
+        <p className="my-0 text-[18px] font-medium text-blue-800/70 dark:text-blue-800-dark/70">
+          {t(titleKey, { count })}
+        </p>
+
+        <p className="mt-2 text-sm text-blue-700/60 dark:text-blue-700-dark/60">
+          {t(bodyKey)}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default TournamentsResults;

front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_screen.tsx

@@ -8,6 +8,7 @@ import TournamentsHero from "./tournaments_hero";
 import TournamentsMobileCtrl from "./tournaments_mobile_ctrl";
 import { TournamentsSectionProvider } from "./tournaments_provider";
 import { TournamentsSection } from "../types";
+import TournamentsResults from "./tournaments_results";
 
 type Props = {
   current: TournamentsSection;
@@ -33,7 +34,9 @@ const TournamentsScreen: React.FC<Props> = ({
         <div className="mt-8">
           <TournamentsHero />
           <TournamentsMobileCtrl />
-          <div className="mt-8 lg:mt-[50px]">{children}</div>
+          <TournamentsResults className="mt-8 lg:mt-[50px]">
+            {children}
+          </TournamentsResults>
         </div>
       </TournamentsSectionProvider>
     </TournamentsContainer>