From 1eeab12f8e02a220fbbbd7833b691984e495305f Mon Sep 17 00:00:00 2001 From: redglow Date: Sat, 20 Jun 2026 16:16:12 +0200 Subject: [PATCH] feat: base mui --- .gitignore | 4 +- .vscode/settings.json | 12 ++ biome.json | 3 +- package.json | 5 +- src/client/components/DashboardLayout.tsx | 135 +++++++++++++ src/client/components/RouterButton.tsx | 11 ++ src/client/components/RouterFab.tsx | 11 ++ src/client/components/RouterLink.tsx | 11 ++ src/client/main.tsx | 24 ++- src/client/routeTree.gen.ts | 35 ++++ src/client/routes/__root.tsx | 19 ++ src/client/theme.tsx | 25 +++ vite.config.ts | 11 +- yarn.lock | 230 ++++++++++++++++++++-- 14 files changed, 511 insertions(+), 25 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/client/components/DashboardLayout.tsx create mode 100644 src/client/components/RouterButton.tsx create mode 100644 src/client/components/RouterFab.tsx create mode 100644 src/client/components/RouterLink.tsx create mode 100644 src/client/routeTree.gen.ts create mode 100644 src/client/routes/__root.tsx create mode 100644 src/client/theme.tsx diff --git a/.gitignore b/.gitignore index 415a046..a67d3a6 100644 --- a/.gitignore +++ b/.gitignore @@ -13,8 +13,6 @@ dist-ssr *.local # Editor directories and files -.vscode/* -!.vscode/extensions.json .idea .DS_Store *.suo @@ -24,4 +22,4 @@ dist-ssr *.sw? # Project-specific -data.db \ No newline at end of file +data.db diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..453c7bf --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,12 @@ +{ + "editor.formatOnSave": true, + "files.readonlyInclude": { + "**/routeTree.gen.ts": true + }, + "files.watcherExclude": { + "**/routeTree.gen.ts": true + }, + "search.exclude": { + "**/routeTree.gen.ts": true + } +} diff --git a/biome.json b/biome.json index 68c8333..c90276c 100644 --- a/biome.json +++ b/biome.json @@ -6,7 +6,8 @@ "useIgnoreFile": true }, "files": { - "ignoreUnknown": false + "ignoreUnknown": false, + "includes": ["**", "!!**/routeTree.gen.ts"] }, "formatter": { "enabled": true, diff --git a/package.json b/package.json index 2788916..9111fad 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,11 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", - "@fontsource/roboto": "^5.2.10", + "@fontsource/raleway": "5.2.8", "@mui/icons-material": "^9.1.1", "@mui/material": "^9.1.1", + "@tanstack/react-router": "^1.170.16", + "@tanstack/react-router-devtools": "^1.167.0", "better-sqlite3": "^12.11.1", "express": "^5.1.0", "kysely": "^0.29.2", @@ -26,6 +28,7 @@ }, "devDependencies": { "@biomejs/biome": "2.5.0", + "@tanstack/router-plugin": "^1.168.18", "@types/express": "^5.0.1", "@types/node": "^22.15.2", "@types/react": "^19.1.2", diff --git a/src/client/components/DashboardLayout.tsx b/src/client/components/DashboardLayout.tsx new file mode 100644 index 0000000..2216167 --- /dev/null +++ b/src/client/components/DashboardLayout.tsx @@ -0,0 +1,135 @@ +import MenuIcon from "@mui/icons-material/Menu"; +import { + AppBar, + Box, + Button, + IconButton, + Menu, + MenuItem, + Toolbar, + Typography, +} from "@mui/material"; +import { Link } from "@tanstack/react-router"; +import { useState } from "react"; +import { RouterButton } from "./RouterButton"; + +const pages = ["Products", "Pricing", "Blog"]; + +export default function DashboardLayout({ + children, +}: { + children: React.ReactNode; +}) { + const [anchorElNav, setAnchorElNav] = useState(null); + + const handleOpenNavMenu = (event: React.MouseEvent) => { + setAnchorElNav(event.currentTarget); + }; + + const handleCloseNavMenu = () => { + setAnchorElNav(null); + }; + + return ( + + + + {/* desktop */} + + owof Announcements + + + {/* mobile */} + + + + + + {pages.map((page) => ( + + {page} + + ))} + + + + + owof Announcements + + + + {pages.map((page) => ( + + {page} + + ))} + + + + + + + {children} + + + + ); +} diff --git a/src/client/components/RouterButton.tsx b/src/client/components/RouterButton.tsx new file mode 100644 index 0000000..8f2f105 --- /dev/null +++ b/src/client/components/RouterButton.tsx @@ -0,0 +1,11 @@ +// src/components/ui/mui-router-button.tsx +import { createLink } from "@tanstack/react-router"; +import { Button, type ButtonProps } from "@mui/material"; +import { forwardRef } from "react"; + +// Create a router-compatible MUI Button +export const RouterButton = createLink( + forwardRef((props, ref) => { + return