Merge pull request 'added RouterLink component setup route system' (#81) from feature/add-routes into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/81

src/components/typography/RouterLink.tsx

@@ -1 +1,18 @@
-export { NavLink as RouterLink } from "react-router-dom";
+import classNames from "classnames";
+import { NavLink, NavLinkProps, To } from "react-router-dom";
+
+type Props = {
+  enabled?: boolean;
+  children?: React.ReactNode;
+} & NavLinkProps;
+
+export function RouterLink({ children, enabled = true, className, to }: Props) {
+  return (
+    <NavLink
+      to={to}
+      className={classNames({ "pointer-events-none": !enabled }, className)}
+    >
+      {children}
+    </NavLink>
+  );
+}

src/index.tsx

@@ -6,6 +6,14 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
 import "./localization/i18n";
+import About from "pages/Information/About";
+import Help from "pages/Information/Help";
+import ContactUs from "pages/Information/ContactUs";
+import TermsOfUse from "pages/Information/TermsOfUse";
+import PrivacyPolicy from "pages/Information/PrivacyPolicy";
+import CookiesPolicy from "pages/Information/CookiesPolicy";
+import AccountSettings from "pages/Information/AccountSettings";
+
 const rootElement = document.getElementById("root");
 if (!rootElement) throw new Error("Failed to find the root element");
 const root = ReactDOM.createRoot(rootElement);
@@ -13,7 +21,16 @@ root.render(
   <React.StrictMode>
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<App />}></Route>
+        <Route path="/" element={<App />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/help" element={<Help />} />
+        <Route path="/contact-us" element={<ContactUs />} />
+        <Route path="/terms-of-use" element={<TermsOfUse />} />
+        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+        <Route path="/cookies-policy" element={<CookiesPolicy />} />
+        <Route path="/account">
+          <Route path="settings" element={<AccountSettings />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   </React.StrictMode>

src/pages/Information/About.tsx

@@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function About({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>About page</Typography>
+    </BaseLayout>
+  );
+}

src/pages/Information/AccountSettings.tsx

@@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function AccountSettings({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Accont Setting page</Typography>
+    </BaseLayout>
+  );
+}

src/pages/Information/ContactUs.tsx

@@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function ContactUs({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Contact us page</Typography>
+    </BaseLayout>
+  );
+}

src/pages/Information/CookiesPolicy.tsx

@@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function CookiesPolicy({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Privacy Cookies page</Typography>
+    </BaseLayout>
+  );
+}

src/pages/Information/Help.tsx

@@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function Help({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Help page</Typography>
+    </BaseLayout>
+  );
+}

src/pages/Information/PrivacyPolicy.tsx

@@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function PrivacyPolicy({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Privacy Policy page</Typography>
+    </BaseLayout>
+  );
+}

src/pages/Information/TermsOfUse.tsx

@@ -0,0 +1,15 @@
+import BaseLayout from "components/BaseLayout";
+import { Footer } from "components/parts/Footer";
+import Header from "components/parts/Header";
+import Typography from "components/typography/Typography";
+import React from "react";
+
+type Props = {};
+
+export default function TermsOfUse({}: Props) {
+  return (
+    <BaseLayout>
+      <Typography>Terms of use page</Typography>
+    </BaseLayout>
+  );
+}