From 86fbfebf1dd276562c188317b13b9e74fa71d72b Mon Sep 17 00:00:00 2001
From: Duoquote <16341937+Duoquote@users.noreply.github.com>
Date: Wed, 6 Mar 2024 01:53:46 +0300
Subject: [PATCH] Add bookmarks button to header

---
 src/components/Header.jsx |  3 ++
 src/langs/en.js           |  1 +
 src/langs/tr.js           |  1 +
 src/main.jsx              |  6 +++
 src/pages/Bookmarks.jsx   | 84 +++++++++++++++++++++++++++++++++++++++
 src/pages/index.js        |  2 +
 6 files changed, 97 insertions(+)
 create mode 100644 src/pages/Bookmarks.jsx

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 6220f87..65ffb20 100644
--- a/src/components/Header.jsx
+++ b/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")}>
           {
diff --git a/src/langs/en.js b/src/langs/en.js
index 700a3f9..5a66e71 100644
--- a/src/langs/en.js
+++ b/src/langs/en.js
@@ -1,6 +1,7 @@
 export const en = {
   header: {
     about: "About",
+    bookmarks: "Bookmarks",
   },
   about: {
     title: "About",
diff --git a/src/langs/tr.js b/src/langs/tr.js
index 8696be4..bfa7731 100644
--- a/src/langs/tr.js
+++ b/src/langs/tr.js
@@ -1,6 +1,7 @@
 export const tr = {
   header: {
     about: "Hakkımda",
+    bookmarks: "Pinler",
   },
   about: {
     title: "Hakkımda",
diff --git a/src/main.jsx b/src/main.jsx
index b3c8ec2..f2721b0 100644
--- a/src/main.jsx
+++ b/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 />,
+      },
     ],
   },
 ]);
diff --git a/src/pages/Bookmarks.jsx b/src/pages/Bookmarks.jsx
new file mode 100644
index 0000000..e93b499
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 1ca4db6..d6642a6 100644
--- a/src/pages/index.js
+++ b/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,
 }
\ No newline at end of file