feat(client): a bunch more things

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

.vscode/settings.json

@@ -1,11 +1,11 @@
 {
-  "python.defaultInterpreterPath": "./server/.venv/bin/python",
+  "python.defaultInterpreterPath": "apps/server/.venv/bin/python3.10",
   "[python]": {
     "editor.defaultFormatter": "ms-python.black-formatter",
     "editor.formatOnSave": true
   },
   "python.formatting.provider": "none",
-  "typescript.tsdk": "apps/client/node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.3/node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true

apps/client/package.json

@@ -18,10 +18,12 @@
     "@hookform/resolvers": "^3.0.0",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-label": "^2.0.1",
+    "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-switch": "^1.0.2",
     "@tailwindcss/forms": "^0.5.3",
-    "@tanstack/react-query": "^4.28.0",
     "@vercel/og": "^0.4.1",
+    "axios": "^1.3.4",
     "clsx": "^1.2.1",
     "contentlayer": "^0.3.0",
     "date-fns": "^2.29.3",

apps/client/src/@types/navigation.d.ts

@@ -1,11 +1,16 @@
-import type { Icon } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 
 declare global {
-  type NavItem = {
+  interface NavigationItem {
+    label: string;
+    href?: string;
+    links?: NavigationItem[];
+    Icon?: LucideIcon;
+  }
+
+  interface NavigationSection {
     title: string;
-    href: string;
-    isExternal?: boolean;
-    disabled?: boolean;
-    icon?: Icon;
-  };
+    links: NavigationItem[];
+    Icon?: LucideIcon;
+  }
 }

apps/client/src/@types/pagelayout.d.ts

@@ -0,0 +1,8 @@
+declare global {
+  interface HeaderSEOProps {
+    title?: string;
+    description?: string;
+    ogImage?: string;
+  }
+}
+export {};

apps/client/src/components/Button/GoBack.tsx

@@ -0,0 +1,17 @@
+import { useRouter } from "next/router";
+
+import { Icons } from "../Icons";
+
+export function GoBackButton() {
+  const router = useRouter();
+
+  return (
+    <button
+      className="group inline-flex rounded-md bg-primary-400 p-2 transition-colors duration-100 ease-linear hover:bg-primary-500/70"
+      onClick={router.back}
+      type="button"
+    >
+      <Icons.GoBack className="text-zinc-100 transition-colors duration-100 ease-linear group-hover:text-zinc-50" />
+    </button>
+  );
+}

apps/client/src/components/Button/index.tsx

@@ -5,7 +5,7 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 export const Button: FC<ButtonProps> = ({ children, className, ...rest }) => {
   return (
     <button
-      className={`p-2 items-center justify-center bg-primary-500 w-full flex hover:bg-primary-600 transition-all rounded-lg ${className}`}
+      className={`p-2 font-bold text-white font-inter items-center justify-center bg-primary-500 w-full flex hover:bg-primary-600 transition-all rounded-md outline-none focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-zinc-200 ${className}`}
       {...rest}
     >
       {children}

apps/client/src/components/Icons/index.tsx

@@ -0,0 +1,22 @@
+import {
+  ArrowLeft,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Github,
+  Link,
+  LucideIcon,
+  X
+} from "lucide-react";
+
+export type Icon = LucideIcon;
+
+export const Icons = {
+  Check: Check,
+  ChevronDown: ChevronDown,
+  ChevronUp: ChevronUp,
+  Close: X,
+  Github: Github,
+  GoBack: ArrowLeft,
+  Link: Link
+};

apps/client/src/components/Input/index.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import { FieldError } from "react-hook-form";
+import clsx from "clsx";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: FieldError;
+  label: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, error, label, name, placeholder, type, ...props }, ref) => {
+    return (
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex justify-between">
+          <label htmlFor={name}>{label}</label>
+          {error ? (
+            <p className="font-grotesk text-red-600 text-sm mt-auto">
+              {error.message}
+            </p>
+          ) : null}
+        </div>
+        <input
+          className={clsx(
+            `border border-primary-200/25 px-2 py-1 h-10 outline-none rounded-md bg-zinc-100 placeholder:text-zinc-400 file:bg-primary-500 file:text-zinc-50 file:mr-2 file:transition-all file:py-1 file:px-2 file:h-full file:-ml-1 file:rounded-md file:border-0 file:text-sm file:font-semibold hover:file:bg-primary-600 focus:ring-2 focus:ring-primary-400 focus:ring-offset-2 focus:ring-offset-zinc-200 ${className}`,
+            {
+              "border-red-600 focus:ring-red-500": error
+            }
+          )}
+          min={type === "number" ? "0" : undefined}
+          step={type === "number" ? "0.1" : undefined}
+          placeholder={type === "number" ? "0" : placeholder}
+          autoComplete={type === "number" ? "off" : "auto"}
+          onKeyDown={
+            type === "number"
+              ? (event) => {
+                  if (
+                    ![
+                      "Backspace",
+                      "Tab",
+                      "ArrowUp",
+                      "ArrowDown",
+                      "ArrowLeft",
+                      "ArrowRight"
+                    ].includes(event.key) &&
+                    !event.key.match(/^\d*\.?\d*$/)
+                  ) {
+                    event.preventDefault();
+                  }
+                }
+              : undefined
+          }
+          id={name}
+          name={name}
+          ref={ref}
+          type={type}
+          {...props}
+        />
+      </div>
+    );
+  }
+);

apps/client/src/components/Layout/Header.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Beaker, Info, LayoutDashboard, LucideIcon, Menu } from "lucide-react";
+import clsx from "clsx";
+import { Beaker, Info, LayoutDashboard, Menu } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -13,24 +14,25 @@ interface MainNavProps {
   theme: string;
 }
 
-interface NavigationItem {
-  label: string;
-  href?: string;
-  links?: NavigationItem[];
-  Icon?: LucideIcon;
-}
-
-interface NavigationSection {
-  title: string;
-  links: NavigationItem[];
-  Icon?: LucideIcon;
-}
-
 export function Header({ setTheme, theme }: MainNavProps) {
   const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
   const { pathname } = useRouter();
 
   const items: NavigationSection[] = [
+    {
+      title: "features:system.title",
+      Icon: Info,
+      links: [
+        {
+          label: "features:system.about.title",
+          href: "/system/about"
+        },
+        {
+          label: "features:system.blog.title",
+          href: "/system/blog"
+        }
+      ]
+    },
     {
       title: "features:dynamic.title",
       Icon: LayoutDashboard,
@@ -54,17 +56,6 @@ export function Header({ setTheme, theme }: MainNavProps) {
           href: "/preparation/acpype"
         }
       ]
-    },
-
-    {
-      title: "features:system.title",
-      Icon: Info,
-      links: [
-        {
-          label: "features:system.about.title",
-          href: "/system/about"
-        }
-      ]
     }
   ];
 
@@ -82,21 +73,30 @@ export function Header({ setTheme, theme }: MainNavProps) {
           {item.Icon ? <item.Icon /> : null}
           <h3>{item.title}</h3>
         </div>
-        <ul>
+        <div className="flex flex-col gap-y-0.5">
           {item.links.map((link) => {
             return (
               <Link
                 key={link.label}
                 href={link.href ? link.href : "#"}
               >
-                <div className="flex flex-1 text-primary-500 gap-x-2 p-2 rounded-md transition-all line-clamp-1 hover:bg-primary-50">
+                <div
+                  className={clsx(
+                    "flex flex-1 text-primary-50 gap-x-2 p-2 rounded-md transition-all line-clamp-1 hover:bg-primary-50",
+                    {
+                      "bg-primary-950": pathname === link.href,
+                      "text-primary-500": pathname !== link.href,
+                      "hover:bg-primary-900": pathname === link.href
+                    }
+                  )}
+                >
                   {link.Icon ? <link.Icon /> : null}
                   <p>{link.label}</p>
                 </div>
               </Link>
             );
           })}
-        </ul>
+        </div>
       </div>
     );
   });

apps/client/src/components/Layout/HeaderSEO.tsx

@@ -1,19 +1,13 @@
 import Head from "next/head";
 import { useRouter } from "next/router";
 
-interface HeaderSEOProps {
-  title?: string;
-  description?: string;
-  ogImage?: string;
-}
-
 export function HeaderSEO({ title, description, ogImage }: HeaderSEOProps) {
   const hostname = typeof window !== "undefined" ? window.origin : "";
   const { pathname } = useRouter();
 
   return (
     <Head>
-      <title>{`${pathname !== "/" ? title + " |" : ""} Visual Dynamics`}</title>
+      <title>{`${pathname !== "/" ? title + " •" : ""} Visual Dynamics`}</title>
       <meta
         name="title"
         content={title}