Coming soon locales

src/locales/en.json

@@ -54,5 +54,6 @@
     "settings": "Nebula - Settings",
     "discord": "Nebula - Discord",
     "404": "Nebula - 404"
-  }
+  },
+  "comingsoon": "Coming soon!"
 }

src/locales/es.json

@@ -54,5 +54,6 @@
     "settings": "Nebula - Ajustes",
     "discord": "Nebula - Discord",
     "404": "Nebula - 404"
-  }
+  },
+  "comingsoon": "¡Próximamente!"
 }

src/locales/ja.json

@@ -54,5 +54,6 @@
     "settings": "ネブラ - セッティング",
     "discord": "ネブラ - Discord",
     "404": "ネブラ - 404"
-  }
+  },
+  "comingsoon": "近日公開"
 }

src/pages/Settings/Customization.tsx

@@ -1,7 +1,10 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
+import { useTranslation } from "react-i18next";
 
-const Customization = ({ id, active }) => (
+function Customization({ id, active }) {
+  const { t } = useTranslation();
+  return (
     <motion.div
       role="tabpanel"
       id={id}
@@ -10,11 +13,15 @@ const Customization = ({ id, active }) => (
       animate={active ? "active" : "inactive"}
       initial="inactive"
     >
-    <motion.div variants={settingsPageVariant} className="content-card text-center w-full flex flex-col justify-center items-center">
+      <motion.div
+        variants={settingsPageVariant}
+        className="content-card flex w-full flex-col items-center justify-center text-center"
+      >
         <img src="/comingsoonsnake.png" class="h-72 w-72"></img>
-      <h1 class="font-roboto text-3xl">Coming soon!</h1>
+        <h1 class="font-roboto text-3xl">{t("comingsoon")}</h1>
       </motion.div>
     </motion.div>
-);
+  );
+}
 
 export default Customization;