feat: add about page

Author: ReaJason

web/src/components/layouts/root-layout.tsx

@@ -1,16 +1,17 @@
+import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";
 import { Outlet } from "react-router-dom";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { ModeToggle } from "@/components/mode-toggle.tsx";
 import { ThemeProvider } from "@/components/theme-provider.tsx";
 import { Button } from "@/components/ui/button";
 import { Toaster } from "@/components/ui/sonner";
-import VersionBadge from "@/components/version-badge";
 import { GitHubIcon } from "@/icon";
 import { siteConfig } from "@/lib/config";
 import { MobileNav } from "../modile-nav";
 
 export default function RootLayout() {
+  const { t } = useTranslation("common");
   return (
     <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
       <Toaster />
@@ -19,25 +20,29 @@ export default function RootLayout() {
           <div className="flex items-center gap-2">
             <MobileNav className="flex lg:hidden" items={siteConfig.navItems} />
             <div className="hidden lg:flex">
-              <NavLink to="/" className="text-base sm:text-lg font-semibold text-center">
-                MemShellParty
+              <NavLink
+                to="/"
+                className="text-base sm:text-lg font-semibold text-center"
+              >
+                {siteConfig.name}
               </NavLink>
             </div>
             <nav className="items-center gap-0.5 hidden lg:flex">
               {siteConfig.navItems.map((item) => (
                 <Button key={item.href} variant="ghost" size="sm" asChild>
-                  <NavLink to={item.href}>{item.label}</NavLink>
+                  <NavLink to={item.href}>{t(item.label)}</NavLink>
                 </Button>
               ))}
             </nav>
             <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
-              <VersionBadge />
               <LanguageSwitcher />
               <Button
                 variant="ghost"
                 size="icon"
                 className="size-8"
-                onClick={() => window.open("https://github.com/ReaJason/MemShellParty")}
+                onClick={() =>
+                  window.open("https://github.com/ReaJason/MemShellParty")
+                }
               >
                 <GitHubIcon />
               </Button>

web/src/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import {Avatar as AvatarPrimitive} from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

web/src/components/version-badge.tsx

@@ -17,5 +17,9 @@ export const siteConfig = {
       href: "/probeshell",
       label: "ProbeShellGenerator",
     },
+    {
+      href: "/about",
+      label: "about",
+    },
   ],
 };