feat : add react-helmet on pages

package-lock.json

@@ -25,6 +25,7 @@
         "nprogress": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-helmet-async": "^2.0.5",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.2.1",
         "react-otp-input": "^3.1.1",
@@ -3783,6 +3784,14 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -4629,6 +4638,24 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-helmet-async/node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-hot-toast": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
@@ -4947,6 +4974,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "react-otp-input": "^3.1.1",

src/App.tsx

@@ -16,39 +16,42 @@ import Login from "./pages/login";
 import Profile from "./pages/profile";
 import { Toaster } from "react-hot-toast";
 import { isAuthenticated } from "./utils/auth";
+import { HelmetProvider } from "react-helmet-async";
 
 const App = () => {
   return (
     <Router basename="/">
-      <Toaster
+      <HelmetProvider>
-        toastOptions={{
+        <Toaster
-          className: "!bg-gray-800 !text-secondTheme !overflow-hidden",
+          toastOptions={{
-        }}
+            className: "!bg-gray-800 !text-secondTheme !overflow-hidden",
-      />
+          }}
-      <ProgressBar />
+        />
-      <Routes>
+        <ProgressBar />
-        <Route path="/" element={<Layout />}>
+        <Routes>
-          <Route index element={<Shop />} />
+          <Route path="/" element={<Layout />}>
-          <Route path="tutorial" element={<Tutorial />} />
+            <Route index element={<Shop />} />
-          <Route path="rule" element={<Rule />} />
+            <Route path="tutorial" element={<Tutorial />} />
-          <Route path="about" element={<About />} />
+            <Route path="rule" element={<Rule />} />
-          <Route path="profile" element={<PrivateRoute />}>
+            <Route path="about" element={<About />} />
-            <Route index element={<Profile />} />
+            <Route path="profile" element={<PrivateRoute />}>
+              <Route index element={<Profile />} />
+            </Route>
           </Route>
-        </Route>
+          <Route
-        <Route
+            path="login"
-          path="login"
+            element={
-          element={
+              isAuthenticated() ? (
-            isAuthenticated() ? (
+                <Navigate to="/" replace={true} />
-              <Navigate to="/" replace={true} />
+              ) : (
-            ) : (
+                <AuthLayout />
-              <AuthLayout />
+              )
-            )
+            }
-          }
+          >
-        >
+            <Route index element={<Login />} />
-          <Route index element={<Login />} />
+          </Route>
-        </Route>
+        </Routes>
-      </Routes>
+      </HelmetProvider>
     </Router>
   );
 };

src/layout/index.tsx

@@ -2,10 +2,23 @@ import { Outlet } from "react-router-dom";
 import Header from "../components/header";
 import Footer from "../components/footer";
 import Particle from "../components/particle";
+import { Helmet } from 'react-helmet-async';
 
 const Layout = () => {
   return (
     <>
+      <Helmet>
+        <title>پرشین پینگ | Persian Ping</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ"
+        />
+      </Helmet>
+
       <Particle />
       <div className={`relative bg-noisy w-full min-h-screen`}>
         <div className="relative max-w-[1400px] mx-auto h-full flex flex-col justify-between">

src/pages/about/index.tsx

@@ -1,12 +1,27 @@
+import { Helmet } from "react-helmet-async";
 import Info from "./section/Info";
 
 const About = () => {
   return (
-    <div className="relative w-full h-full py-2">
+    <>
-      <div className="relative w-full h-full glass px-4 py-2">
+      <Helmet>
-        <Info />
+        <title>درباره ما</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ , درباره ما"
+        />
+      </Helmet>
+
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Info />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/pages/rule/index.tsx

@@ -1,12 +1,26 @@
+import { Helmet } from "react-helmet-async";
 import Rules from "./section/Rules";
 
 const Rule = () => {
   return (
-    <div className="relative w-full h-full py-2">
+    <>
-      <div className="relative w-full h-full glass px-4 py-2">
+      <Helmet>
-        <Rules />
+        <title>قوانین</title>
-      </div>
+        <meta
-    </div>
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ , قوانین"
+        />
+      </Helmet>
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Rules />
+        </div>
+      </div>{" "}
+    </>
   );
 };
 

src/pages/shop/index.tsx

@@ -1,3 +1,4 @@
+import { Helmet } from "react-helmet-async";
 import BestQuality from "./section/bestQuality/BestQuality";
 import FastSell from "./section/fastSell/FastSell";
 import Intro from "./section/intro/Intro";
@@ -6,15 +7,29 @@ import ProductList from "./section/productList/ProductList";
 
 const Shop = () => {
   return (
-    <div className="relative w-full h-full py-2">
+    <>
-      <div className="relative w-full h-full glass px-4 py-2">
+      <Helmet>
-        <Intro />
+        <title>فروشگاه</title>
-        <FastSell />
+        <meta
-        <NowSell />
+          name="description"
-        <ProductList />
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
-        <BestQuality />
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ و فروشگاه"
+        />
+      </Helmet>
+
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Intro />
+          <FastSell />
+          <NowSell />
+          <ProductList />
+          <BestQuality />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/pages/tutorial/index.tsx

@@ -1,12 +1,27 @@
+import { Helmet } from "react-helmet-async";
 import Tutorials from "./section/Tutorials";
 
 const Tutorial = () => {
   return (
-    <div className="relative w-full h-full py-2">
+    <>
-      <div className="relative w-full h-full glass px-4 py-2">
+      <Helmet>
-        <Tutorials />
+        <title>اموزش</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ و آموزش"
+        />
+      </Helmet>
+
+      <div className="relative w-full h-full py-2">
+        <div className="relative w-full h-full glass px-4 py-2">
+          <Tutorials />
+        </div>
       </div>
-    </div>
+    </>
   );
 };