🧑‍💻 Seperate domain alert component

barbarbar338 · Jul 28, 2022 · 365fdbf · 365fdbf
1 parent 22d5d42
commit 365fdbf
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 51 deletions.
diff --git a/components/Layout/DomainAlert/index.tsx b/components/Layout/DomainAlert/index.tsx
@@ -0,0 +1,37 @@
+import { type FC, useEffect, useState } from "react";
+import { useLocaleParser } from "@libs/localeParser";
+import { Alert } from "@components/Utils/Alert";
+import { CONFIG } from "@libs/config";
+import { useLocalStorage } from "react-use";
+
+export const DomainAlert: FC = () => {
+	const parser = useLocaleParser();
+
+	const [check, setCheck] = useLocalStorage("domain_check", false);
+	const [show, setShow] = useState(false);
+
+	useEffect(() => {
+		if (!window.location.hostname.includes("338.rocks") && !check) {
+			setShow(true);
+		}
+	}, [check]);
+
+	const handleClose = () => {
+		setCheck(true);
+		setShow(false);
+	};
+	return (
+		show && (
+			<div className="container mx-auto">
+				<Alert
+					type="warning"
+					title={parser.get("new_domain")}
+					onClose={handleClose}
+					html={parser.get("new_domain_alert", {
+						link: `<a rel='noreferrer' target='_blank' href='${CONFIG.SEO.publishDomain}' class='cursor-pointer hover:underline'>${CONFIG.SEO.publishDomain}</a>`,
+					})}
+				></Alert>
+			</div>
+		)
+	);
+};
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
@@ -1,10 +1,8 @@
-import { type FC, type ReactNode, useEffect, useState } from "react";
-import { useLocaleParser } from "@libs/localeParser";
+import { type FC, type ReactNode } from "react";
+import { DomainAlert } from "@components/Layout/DomainAlert";
 import { Footer } from "@components/Layout/Footer";
 import { Navbar } from "@components/Layout/Navbar";
-import { Alert } from "@components/Utils/Alert";
 import { CONFIG } from "@libs/config";
-import { useLocalStorage } from "react-use";
 import { useRouter } from "next/router";
 import { NextSeo } from "next-seo";
 
@@ -14,24 +12,8 @@ export interface ILayout {
 }
 
 export const Layout: FC<ILayout> = ({ title, children }) => {
-	const parser = useLocaleParser();
-
 	const router = useRouter();
 
-	const [check, setCheck] = useLocalStorage("domain_check", false);
-	const [show, setShow] = useState(false);
-
-	useEffect(() => {
-		if (!window.location.hostname.includes("338.rocks") && !check) {
-			setShow(true);
-		}
-	}, [check]);
-
-	const handleClose = () => {
-		setCheck(true);
-		setShow(false);
-	};
-
 	return (
 		<div className="select-none">
 			<NextSeo
@@ -40,18 +22,7 @@ export const Layout: FC<ILayout> = ({ title, children }) => {
 			/>
 			<>
 				<Navbar />
-				{show && (
-					<div className="container mx-auto">
-						<Alert
-							type="warning"
-							title={parser.get("new_domain")}
-							onClose={handleClose}
-							html={parser.get("new_domain_alert", {
-								link: `<a rel='noreferrer' target='_blank' href='${CONFIG.SEO.publishDomain}' class='cursor-pointer hover:underline text-blue-500'>${CONFIG.SEO.publishDomain}</a>`,
-							})}
-						></Alert>
-					</div>
-				)}
+				<DomainAlert />				
 				{children}
 				<Footer />
 			</>

diff --git a/libs/localeParser.ts b/libs/localeParser.ts
@@ -5,21 +5,11 @@ import tr from "@locales/tr.yaml";
 import constants from "@locales/constants.yaml";
 import { CONFIG } from "./config";
 
-export interface IToken {
-	key: string;
-	value: string;
-}
-
-export interface ITokens {
-	[key: string]: IToken;
-}
 
 const locales = { en, tr };
-const tokens: ITokens = {
-	purple: {
-		key: "purple",
-		value: "<span class='text-purple-500'>",
-	},
+const tokens = {
+	purple: "<span class='text-purple-500'>",
+	blue: "<span class='text-blue-500'>",
 };
 
 class LocaleParser {
@@ -66,11 +56,11 @@ class LocaleParser {
 	}
 
 	private replaceColors(str: string) {
-		for (const t in tokens) {
-			const token = tokens[t];
+		for (const token in tokens) {
+			const value = tokens[token];
 			str = str
-				.replace(new RegExp(`<${token.key}[^>]*>`, "gm"), token.value)
-				.replace(new RegExp(`</${token.key}[^>]*>`, "gm"), "</span>");
+				.replace(new RegExp(`<${token}[^>]*>`, "gm"), value)
+				.replace(new RegExp(`</${token}[^>]*>`, "gm"), "</span>");
 		}
 
 		return str;

diff --git a/locales/en.yaml b/locales/en.yaml
@@ -24,7 +24,7 @@ drop: drop
 restart: restart
 game_over: Game Over
 winner: "%{player} won!"
-new_domain_alert: I have migrated to a new domain name. Now when entering this site, make sure it says %{link} in the address bar!
+new_domain_alert: I have migrated to a new domain name. Now when entering this site, make sure it says <blue>%{link}</blue> in the address bar!
 new_domain: New Domain
 home: Home
 about: About

diff --git a/locales/tr.yaml b/locales/tr.yaml
@@ -24,7 +24,7 @@ drop: düşür
 restart: yeniden başlat
 game_over: Oyun bitti
 winner: "%{player} kazandı!"
-new_domain_alert: Yeni bir alan adına geçiş yaptım. Artık siteye girerken adres barında %{link} yazdığından emin olun!
+new_domain_alert: Yeni bir alan adına geçiş yaptım. Artık siteye girerken adres barında <blue>%{link}</blue> yazdığından emin olun!
 new_domain: Yeni Alan Adı
 home: AnaSayfa
 about: Hakkımda