Quay/quay
1
1
Fork 0
Code Issues Pull Requests Actions Releases 1 Activity

AddedReact router and react query

Browse Source
This commit is contained in:
KartoffelChips
2026-04-03 14:56:45 +02:00
parent 6622e2807b
commit 7bb7454d7f
5 changed files with 145 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/package.json
+2
View File
@@ -12,12 +12,14 @@
"dependencies": {
"@fontsource-variable/geist": "^5.2.8",
"@tailwindcss/vite": "^4.2.2",
"@tanstack/react-query": "^5.96.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^1.7.0",
"radix-ui": "^1.4.3",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-router": "^7.14.0",
"shadcn": "^4.1.2",
"tailwind-merge": "^3.5.0",
"tailwindcss": "^4.2.2",
frontend/pnpm-lock.yaml
Generated
+44
View File
@@ -14,6 +14,9 @@ importers:
'@tailwindcss/vite':
specifier: ^4.2.2
version: 4.2.2(vite@8.0.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@types/node@24.12.1)(jiti@2.6.1))
'@tanstack/react-query':
specifier: ^5.96.2
version: 5.96.2(react@19.2.4)
class-variance-authority:
specifier: ^0.7.1
version: 0.7.1
@@ -32,6 +35,9 @@ importers:
react-dom:
specifier: ^19.2.4
version: 19.2.4(react@19.2.4)
react-router:
specifier: ^7.14.0
version: 7.14.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
shadcn:
specifier: ^4.1.2
version: 4.1.2(@types/node@24.12.1)(typescript@5.9.3)
@@ -1299,6 +1305,14 @@ packages:
peerDependencies:
vite: ^5.2.0 || ^6 || ^7 || ^8
'@tanstack/query-core@5.96.2':
resolution: {integrity: sha512-hzI6cTVh4KNRk8UtoIBS7Lv9g6BnJPXvBKsvYH1aGWvv0347jT3BnSvztOE+kD76XGvZnRC/t6qdW1CaIfwCeA==}
'@tanstack/react-query@5.96.2':
resolution: {integrity: sha512-sYyzzJT4G0g02azzJ8o55VFFV31XvFpdUpG+unxS0vSaYsJnSPKGoI6WdPwUucJL1wpgGfwfmntNX/Ub1uOViA==}
peerDependencies:
react: ^18 || ^19
'@ts-morph/common@0.27.0':
resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
@@ -2562,6 +2576,16 @@ packages:
'@types/react':
optional: true
react-router@7.14.0:
resolution: {integrity: sha512-m/xR9N4LQLmAS0ZhkY2nkPA1N7gQ5TUVa5n8TgANuDTARbn1gt+zLPXEm7W0XDTbrQ2AJSJKhoa6yx1D8BcpxQ==}
engines: {node: '>=20.0.0'}
peerDependencies:
react: '>=18'
react-dom: '>=18'
peerDependenciesMeta:
react-dom:
optional: true
react-style-singleton@2.2.3:
resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
engines: {node: '>=10'}
@@ -2642,6 +2666,9 @@ packages:
resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
engines: {node: '>= 18'}
set-cookie-parser@2.7.2:
resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
setprototypeof@1.2.0:
resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
@@ -4297,6 +4324,13 @@ snapshots:
tailwindcss: 4.2.2
vite: 8.0.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@types/node@24.12.1)(jiti@2.6.1)
'@tanstack/query-core@5.96.2': {}
'@tanstack/react-query@5.96.2(react@19.2.4)':
dependencies:
'@tanstack/query-core': 5.96.2
react: 19.2.4
'@ts-morph/common@0.27.0':
dependencies:
fast-glob: 3.3.3
@@ -5532,6 +5566,14 @@ snapshots:
optionalDependencies:
'@types/react': 19.2.14
react-router@7.14.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
cookie: 1.1.1
react: 19.2.4
set-cookie-parser: 2.7.2
optionalDependencies:
react-dom: 19.2.4(react@19.2.4)
react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
dependencies:
get-nonce: 1.0.1
@@ -5638,6 +5680,8 @@ snapshots:
transitivePeerDependencies:
- supports-color
set-cookie-parser@2.7.2: {}
setprototypeof@1.2.0: {}
shadcn@4.1.2(@types/node@24.12.1)(typescript@5.9.3):
frontend/src/components/theme-provider.tsx
+71
View File
@@ -0,0 +1,71 @@
import { createContext, useContext, useEffect, useState } from 'react';
export type Theme = 'dark' | 'light' | 'system';
type ThemeProviderProps = {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
};
type ThemeProviderState = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
const initialState: ThemeProviderState = {
theme: 'system',
setTheme: () => null,
};
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
export function ThemeProvider({
children,
defaultTheme = 'system',
storageKey = 'vite-ui-theme',
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
);
useEffect(() => {
const root = window.document.documentElement;
root.classList.remove('light', 'dark');
if (theme === 'system') {
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
root.classList.add(systemTheme);
return;
}
root.classList.add(theme);
}, [theme]);
const value = {
theme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
},
};
return (
<ThemeProviderContext.Provider {...props} value={value}>
{children}
</ThemeProviderContext.Provider>
);
}
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
return context;
};
frontend/src/main.tsx
+18 -8
View File
@@ -1,10 +1,20 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter, Route, Routes } from 'react-router';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import './index.css';
import MainPage from './pages/Main/Main';
import { ThemeProvider } from './components/theme-provider';
const queryClient = new QueryClient();
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<BrowserRouter>
<Routes>
<Route path="/" element={<MainPage />} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</QueryClientProvider>
);
frontend/src/pages/Main/Main.tsx
+10
View File
@@ -0,0 +1,10 @@
const MainPage = () => {
return (
<div>
<h1>Main Page</h1>
<p>Welcome to the main page of our application!</p>
</div>
);
};
export default MainPage;