Add random titles on home page

src/hooks/useRandomTranslation.ts

@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+
+export function useRandomTranslation() {
+  const { t } = useTranslation();
+
+  const getRandomTranslation = (key: string) => {
+    const res = t(key, { returnObjects: true });
+
+    if (Array.isArray(res)) return res[Math.floor(Math.random() * res.length)];
+
+    return res;
+  };
+
+  return { t: getRandomTranslation };
+}

src/pages/parts/home/HeroPart.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
 import Sticky from "react-stickynode";
 
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { SearchBarInput } from "@/components/SearchBar";
 import { HeroTitle } from "@/components/text/HeroTitle";
+import { useRandomTranslation } from "@/hooks/useRandomTranslation";
 import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { useBannerSize } from "@/stores/banner";
 
@@ -14,7 +14,7 @@ export interface HeroPartProps {
 }
 
 export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
-  const { t } = useTranslation();
+  const { t } = useRandomTranslation();
   const [search, setSearch, setSearchUnFocus] = searchParams;
   const [, setShowBg] = useState(false);
   const bannerSize = useBannerSize();
@@ -27,13 +27,17 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
     [setShowBg, setIsSticky]
   );
 
+  let time = "night";
+  const hour = new Date().getHours();
+  if (hour < 12) time = "morning";
+  if (hour < 19) time = "day";
+  const title = t(`search.title.${time}`);
+
   return (
     <ThinContainer>
       <div className="mt-44 space-y-16 text-center">
         <div className="relative z-10 mb-16">
-          <HeroTitle className="mx-auto max-w-xs">
-            {t("search.title")}
-          </HeroTitle>
+          <HeroTitle className="mx-auto max-w-xs">{title}</HeroTitle>
         </div>
         <div className="relative z-30">
           <Sticky

src/setup/locales/en/translation.json

@@ -10,7 +10,22 @@
     "headingTitle": "Search results",
     "bookmarks": "Bookmarks",
     "continueWatching": "Continue Watching",
-    "title": "What to watch tonight?",
+    "title": {
+      "morning": [
+        "What would you like to watch today?",
+        "I hear Before Sunrise is good"
+      ],
+      "day": [
+        "Shouldn't u be at school right now?",
+        "What to watch today?",
+        "Partially built in Holland"
+      ],
+      "night": [
+        "What to watch tonight?",
+        "Tired? I hear The Excorcist is good.",
+        "https://youtu.be/68ugkg9RePc"
+      ]
+    },
     "placeholder": "What do you want to watch?"
   },
   "media": {