navbar

2024-10-05 21:33:06 +03:00 · 2024-10-05 21:33:06 +03:00 · 4d4d55904e
commit 4d4d55904e
parent cfb5d5f210
10 changed files with 323 additions and 28 deletions
--- a/enshi/index.html
+++ b/enshi/index.html
@ -1,14 +1,21 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
+            rel="stylesheet"
+        />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <title>Enshi</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>
--- a/enshi/package-lock.json
+++ b/enshi/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "@radix-ui/react-dialog": "^1.1.1",
        "@radix-ui/react-form": "^0.1.0",
+        "@radix-ui/react-navigation-menu": "^1.2.1",
        "@radix-ui/react-tooltip": "^1.1.2",
        "@radix-ui/themes": "^3.1.3",
        "@tanstack/react-query": "^5.55.0",
@ -1699,19 +1700,19 @@
      }
    },
    "node_modules/@radix-ui/react-navigation-menu": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.0.tgz",
-      "integrity": "sha512-OQ8tcwAOR0DhPlSY3e4VMXeHiol7la4PPdJWhhwJiJA+NLX0SaCaonOkRnI3gCDHoZ7Fo7bb/G6q25fRM2Y+3Q==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.1.tgz",
+      "integrity": "sha512-egDo0yJD2IK8L17gC82vptkvW1jLeni1VuqCyzY727dSJdk5cDjINomouLoNk8RVF7g2aNIfENKWL4UzeU9c8Q==",
      "license": "MIT",
      "dependencies": {
        "@radix-ui/primitive": "1.1.0",
        "@radix-ui/react-collection": "1.1.0",
        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
        "@radix-ui/react-direction": "1.1.0",
-        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
        "@radix-ui/react-primitive": "2.0.0",
        "@radix-ui/react-use-callback-ref": "1.1.0",
        "@radix-ui/react-use-controllable-state": "1.1.0",
@ -1734,6 +1735,72 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-popover": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
@ -2436,6 +2503,42 @@
        }
      }
    },
+    "node_modules/@radix-ui/themes/node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.0.tgz",
+      "integrity": "sha512-OQ8tcwAOR0DhPlSY3e4VMXeHiol7la4PPdJWhhwJiJA+NLX0SaCaonOkRnI3gCDHoZ7Fo7bb/G6q25fRM2Y+3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/themes/node_modules/@radix-ui/react-tooltip": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.1.tgz",
--- a/enshi/package.json
+++ b/enshi/package.json
@ -12,6 +12,7 @@
  "dependencies": {
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-form": "^0.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@radix-ui/themes": "^3.1.3",
    "@tanstack/react-query": "^5.55.0",
--- a/enshi/src/App.tsx
+++ b/enshi/src/App.tsx
@ -17,24 +17,51 @@ import { useRef, useState } from "react";
 import parse from "html-react-parser";
 import Editor from "./Components/Editor/Editor";

-import { Router, Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from "react-router-dom";
+import {
+    Router,
+    Route,
+    createBrowserRouter,
+    createRoutesFromElements,
+    RouterProvider,
+    Routes,
+    useRouteError,
+} from "react-router-dom";
 import MainPage from "./Pages/MainPage/MainPage";
+import { QueryClientProvider } from "@tanstack/react-query";
+import queryClient from "./api/QueryClient/QueryClient";
+
+function ErrorBoundary() {
+    let error = useRouteError();
+    console.error(error);
+
+    return <div>Dang! This route does not exist... Yet ;)</div>;
+}

 const router = createBrowserRouter(
    createRoutesFromElements(
-        <Route path="/" element={<MainPage />}>
-            <Route index element={<Text>Cringer path</Text>}/>
-        </Route>
+        <>
+            <Route
+                path="/"
+                errorElement={<ErrorBoundary />}
+                element={<MainPage />}
+            >
+                <Route index element={<Text>Cringer path</Text>} />
+                <Route
+                    path="/a?/c"
+                    element={<Text>Cringer path, but this a</Text>}
+                ></Route>
+            </Route>
+        </>
    )
 );

 export default function App() {
-    const { t } = useTranslation();
-
    return (
        <Theme className="h-fit" accentColor="indigo" grayColor="slate">
-            <RouterProvider router={router} />
-            <ThemePanel />
+            <QueryClientProvider client={queryClient}>
+                <RouterProvider router={router} />
+                <ThemePanel />
+            </QueryClientProvider>
        </Theme>
    );
 }
--- a/enshi/src/Components/NavBar/NavBar.tsx
+++ b/enshi/src/Components/NavBar/NavBar.tsx
@ -0,0 +1,52 @@
+import { Button, Text } from "@radix-ui/themes";
+import * as NavigationMenu from "@radix-ui/react-navigation-menu";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+
+export default function NavBar() {
+    return (
+        <nav className="pt-2">
+            <NavigationMenu.Root
+                orientation="horizontal"
+                className="flex justify-center"
+            >
+                <NavigationMenu.List className="flex justify-center gap-2">
+                    <NavItem text="Cringer" to="/"/>
+
+                    <NavItem text="C-Cringer" to="/c"/>
+
+                </NavigationMenu.List>
+            </NavigationMenu.Root>
+        </nav>
+    );
+}
+
+type TNavItem = {
+    text: string;
+    to: string;
+};
+
+function NavItem(props: TNavItem) {
+
+    const navigate = useNavigate()
+    const location = useLocation()
+
+    console.log(location);
+    
+
+    return (
+        <NavigationMenu.Item>
+            <NavigationMenu.Link>
+                    <Button
+                        className="w-fit h-fit rounded-full m-0 p-0 pr-2 pl-2 mt-2 mb-2"
+
+                        highContrast
+
+                        variant={location.pathname === props.to ? 'solid' : 'ghost'}
+                        onClick={() => navigate(props.to)}
+                    >
+                        <Text size={"3"}>{props.text}</Text>
+                    </Button>
+            </NavigationMenu.Link>
+        </NavigationMenu.Item>
+    );
+}
--- a/enshi/src/Pages/MainPage/MainPage.tsx
+++ b/enshi/src/Pages/MainPage/MainPage.tsx
@ -1,10 +1,11 @@
 import React from 'react'
 import { Outlet } from 'react-router-dom'
+import NavBar from '../../Components/NavBar/NavBar'

 export default function MainPage() {
  return (
    <>
-        <nav>q</nav>
+        <NavBar />
        <Outlet />
    </>
  )
--- a/enshi/src/api/QueryClient/QueryClient.ts
+++ b/enshi/src/api/QueryClient/QueryClient.ts
@ -0,0 +1,14 @@
+import {
+    QueryClient
+  } from '@tanstack/react-query'
+
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: Infinity
+        }
+    }
+})
+
+export default queryClient
--- a/enshi/src/index.css
+++ b/enshi/src/index.css
@ -1,3 +1,17 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.radix-themes {
+	--default-font-family: 
+    --heading-font-family:
+		/* Your custom font for <Heading> components */ 
+        --code-font-family:
+		/* Your custom font for <Code> components */ 
+        --strong-font-family:
+		/* Your custom font for <Strong> components */ 
+        --em-font-family:
+		/* Your custom font for <Em> components */ 
+        --quote-font-family:
+		/* Your custom font for <Quote> components */;
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,71 @@
+{
+  "name": "Enshi",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@tanstack/react-query": "^5.59.0"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.0.tgz",
+      "integrity": "sha512-WGD8uIhX6/deH/tkZqPNcRyAhDUqs729bWKoByYHSogcshXfFbppOdTER5+qY7mFvu8KEFJwT0nxr8RfPTVh0Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.0.tgz",
+      "integrity": "sha512-YDXp3OORbYR+8HNQx+lf4F73NoiCmCcSvZvgxE29OifmQFk0sBlO26NWLHpcNERo92tVk3w+JQ53/vkcRUY1hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.59.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.59.0"
+  }
+}