Done

2024-11-18 19:35:17 +03:00 · 2024-11-18 19:35:17 +03:00 · c828d6b132
commit c828d6b132
parent f892faa180
9 changed files with 241 additions and 67 deletions
--- a/enshi/package-lock.json
+++ b/enshi/package-lock.json
@ -14,6 +14,7 @@
        "@radix-ui/react-tooltip": "^1.1.2",
        "@radix-ui/themes": "^3.1.3",
        "@tanstack/react-query": "^5.55.0",
+        "axios": "^1.7.7",
        "html-react-parser": "^5.1.16",
        "i18n": "^0.15.1",
        "i18next": "^23.14.0",
@ -3336,6 +3337,12 @@
        "node": ">=10"
      }
    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
    "node_modules/autoprefixer": {
      "version": "10.4.20",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@ -3374,6 +3381,17 @@
        "postcss": "^8.1.0"
      }
    },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -3602,6 +3620,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -3738,6 +3768,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
    "node_modules/detect-node-es": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@ -4357,6 +4396,26 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/foreground-child": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@ -4374,6 +4433,20 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@ -5185,6 +5258,27 @@
        "node": ">=8.6"
      }
    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/minimatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -5712,6 +5806,12 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
--- a/enshi/package.json
+++ b/enshi/package.json
@ -16,6 +16,7 @@
    "@radix-ui/react-tooltip": "^1.1.2",
    "@radix-ui/themes": "^3.1.3",
    "@tanstack/react-query": "^5.55.0",
+    "axios": "^1.7.7",
    "html-react-parser": "^5.1.16",
    "i18n": "^0.15.1",
    "i18next": "^23.14.0",
--- a/enshi/src/Components/ArticleViewer/ArcticleViewer.tsx
+++ b/enshi/src/Components/ArticleViewer/ArcticleViewer.tsx
@ -1,7 +1,7 @@
 import { Container } from "@radix-ui/themes";
 import React from "react";

-export default function ArcticleViewer() {
+export default function ArticleViewer() {
    return (
        <>
            <div className="ql-snow">
--- a/enshi/src/Components/NavBar/NavBar.tsx
+++ b/enshi/src/Components/NavBar/NavBar.tsx
@ -1,42 +1,25 @@
-import { Button, Card, ChevronDownIcon, Text } from "@radix-ui/themes";
+import { Button, Heading, IconButton, TextField, useThemeContext } from "@radix-ui/themes";
 import * as NavigationMenu from "@radix-ui/react-navigation-menu";
 import { useLocation, useNavigate } from "react-router-dom";
-
+import { PersonIcon } from "@radix-ui/react-icons"
+ 
 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="/" />
+        <nav className="flex justify-between pt-2 pb-2 ml-4 mr-4">
+            <NavigationMenu.Root orientation="horizontal">
+                <NavigationMenu.List className="flex items-center justify-start gap-8">
+                    <NavItem text="Home" to="/" />

-                    <NavItem text="C-Cringer" to="/c" />
-
-                    <NavigationMenu.Item className="text-center">
-                        <NavigationMenu.Trigger className="flex items-center">
-                            <Button
-                                asChild
-                                className="w-fit pr-2 h-fit rounded-full m-0 p-0  pl-2 mt-2 mb-2 duration-[50ms]"
-                                variant="ghost"
-                                highContrast
-                            >
-                                <Text
-                                    size={"3"}
-                                    className="flex items-center gap-1"
-                                >
-                                    Cringer 123 <ChevronDownIcon />
-                                </Text>
-                            </Button>
-                        </NavigationMenu.Trigger>
-
-                        <NavigationMenu.Content className="absolute data-[motion=from-start]:scale-150">
-                            <Card>asd</Card>
-                        </NavigationMenu.Content>
-                    </NavigationMenu.Item>
+                    <NavItem text="Following" to="/c" />
                </NavigationMenu.List>
            </NavigationMenu.Root>
+
+            <TextField.Root className="w-1/3 rounded-lg" placeholder="Search...">
+            </TextField.Root>
+
+            <IconButton>
+                <PersonIcon />
+            </IconButton>
        </nav>
    );
 }
@ -49,19 +32,35 @@ type TNavItem = {
 function NavItem(props: TNavItem) {
    const navigate = useNavigate();
    const location = useLocation();
+    const theme = useThemeContext();

    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 duration-[50ms]"
-                    highContrast
-                    variant={location.pathname === props.to ? "solid" : "ghost"}
-                    onClick={() => navigate(props.to)}
-                >
-                    <Text size={"3"}>{props.text}</Text>
-                </Button>
-            </NavigationMenu.Link>
-        </NavigationMenu.Item>
+        <div className="relative flex flex-col">
+            <NavigationMenu.Item>
+                <NavigationMenu.Link>
+                    <div>
+                        <Button
+                            className="w-fit border-0 border-b-[0px] border-solid"
+                            highContrast
+                            variant="ghost"
+                            onClick={() => navigate(props.to)}
+                        >
+                            <Heading weight={"medium"} size={"3"}>
+                                {props.text}
+                            </Heading>
+                        </Button>
+                    </div>
+                </NavigationMenu.Link>
+            </NavigationMenu.Item>
+            {location.pathname == props.to ? (
+                <div
+                    className={`absolute animate-widthOut bottom-[-0.35rem] 
+                                w-full h-[2px] z-[999] rounded-full`}
+                    style={{
+                        background: `var(--${theme.accentColor}-10)`,
+                    }}
+                ></div>
+            ) : null}
+        </div>
    );
 }
--- a/enshi/src/index.css
+++ b/enshi/src/index.css
@ -1,10 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+
@tailwind base;
@tailwind components;
@tailwind utilities;

+
 .radix-themes {
-	--default-font-family: 
-    --heading-font-family:
+	--default-font-family: "Times New Roman"; ;
+ 
+    --heading-font-family: "Edu AU VIC WA NT Pre", cursive;
 		/* Your custom font for <Heading> components */ 
        --code-font-family:
 		/* Your custom font for <Code> components */ 
--- a/enshi/src/routes/routes.tsx
+++ b/enshi/src/routes/routes.tsx
@ -17,10 +17,10 @@ export const routes = createRoutesFromElements(
            errorElement={<ErrorBoundary />}
            element={<MainPage />}
        >
-            <Route index element={<Text>Cringer path</Text>} />
+            <Route index element={<Text size={"5"}>Cringer path</Text>} />
            <Route
                path="/a?/c"
-                element={<Text>Cringer path, but this a</Text>}
+                element={<Text weight={"regular"}>Cringer path, but this a</Text>}
            ></Route>
        </Route>
    </>
--- a/enshi/tailwind.config.js
+++ b/enshi/tailwind.config.js
@ -1,21 +1,32 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      animation: {
-        'appear': 'appear 0.25s'
-      },
-      keyframes: {
-        appear: {
-          '100%': {opacity: '1'}
-        }
-      }
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {
+        extend: {
+            colors: {
+                "primary-color": "var(--primary-color)",
+                "secondary-color": "var(--secondary-color)",
+            },
+            animation: {
+                appear: "appear 0.25s",
+                widthOut: "widthOut cubic-bezier(0.4, 0, 0.6, 1) 0.4s",
+            },
+            keyframes: {
+                appear: {
+                    "100%": { opacity: "1" },
+                },
+                widthOut: {
+                    "0%": {
+                        width: "0%",
+                        left: "50%",
+                    },
+                    "100%": {
+                        width: "100%",
+                        left: "0%",
+                    },
+                },
+            },
+        },
    },
-  },
-  plugins: [],
-}
-
+    plugins: [],
+};
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,54 @@
+{
+  "name": "Enshi",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@radix-ui/react-icons": "^1.3.2"
+      }
+    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "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": {
+    "@radix-ui/react-icons": "^1.3.2"
+  }
+}