Add bookmarks button to header

src/components/Header.jsx

@@ -81,6 +81,9 @@ const Header = ({ }) => {
         <Button onClick={() => navigate("/about")}>
           {t("header.about")}
         </Button>
+        <Button onClick={() => navigate("/bookmarks")}>
+          {t("header.bookmarks")}
+        </Button>
         <Box component="span" sx={{ flexGrow: 1 }} />
         <IconButton onClick={() => i18n.changeLanguage(i18n.language === "en" ? "tr" : "en")}>
           {

src/langs/en.js

@@ -1,6 +1,7 @@
 export const en = {
   header: {
     about: "About",
+    bookmarks: "Bookmarks",
   },
   about: {
     title: "About",

src/langs/tr.js

@@ -1,6 +1,7 @@
 export const tr = {
   header: {
     about: "Hakkımda",
+    bookmarks: "Pinler",
   },
   about: {
     title: "Hakkımda",

src/main.jsx

@@ -38,6 +38,8 @@ i18n
     }
   });
 
+i18n.on("languageChanged", lng => { document.documentElement.lang = lng; });
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -51,6 +53,10 @@ const router = createBrowserRouter([
         path: "/about",
         element: <Pages.About />,
       },
+      {
+        path: "/bookmarks",
+        element: <Pages.Bookmarks />,
+      },
     ],
   },
 ]);

src/pages/Bookmarks.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+
+import {
+  Box, Container, Paper, Typography, Grid,
+  Card,
+  Tooltip,
+} from "@mui/material";
+
+const Pin = ({ url, name, description }) => {
+
+  return (
+    <Grid item xs={12} sm={6} md={4}>
+      <Tooltip title={description} arrow>
+        <Paper
+          title={description}
+          variant="outlined"
+          sx={{
+            p: 2,
+            cursor: "pointer",
+          }}
+          onClick={() => window.open(url, "_blank")}
+        >
+          <Typography variant="h5" gutterBottom>
+            {name}
+          </Typography>
+          <Typography variant="body2" gutterBottom>
+            {url}
+          </Typography>
+        </Paper>
+      </Tooltip>
+    </Grid>
+  )
+}
+
+const Bookmarks = () => {
+
+  return (
+    <Container>
+      <Box sx={{
+        height: "100%",
+        width: "100%",
+        pt: 6,
+      }}>
+        <Container maxWidth="md" sx={{
+          p: 4,
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100%"
+        }}>
+          <Grid container spacing={2}>
+            <Pin
+              name="BBOX Finder"
+              url="http://bboxfinder.com/"
+              description="A tool to get bounding boxes."
+            />
+            <Pin
+              name="Geohash Converter"
+              url="http://geohash.co/"
+              description="A tool to convert geohash to coordinates."
+            />
+            <Pin
+              name="GeoJSON.io"
+              url="http://geojson.io/"
+              description="A tool to play with areas and create/edit GeoJSON data type."
+            />
+            <Pin
+              name="HERE Playground"
+              url="https://refclient.ext.here.com/"
+              description="HERE REST API Playground."
+            />
+            <Pin
+              name="Photopea"
+              url="https://www.photopea.com/"
+              description="A Photoshop-like online image editor."
+            />
+          </Grid>
+        </Container>
+      </Box>
+    </Container>
+  );
+};
+
+export default Bookmarks;

src/pages/index.js

@@ -1,7 +1,9 @@
 import About from "./About";
 import Main from "./Main";
+import Bookmarks from "./Bookmarks";
 
 export default {
   About,
   Main,
+  Bookmarks,
 }