From cb206c10bbffc1791a84ba4ad15481829c210ba9 Mon Sep 17 00:00:00 2001 From: "theis.gaedigk" Date: Tue, 22 Jul 2025 12:41:55 +0200 Subject: [PATCH] added react layout with header, main and footer --- client/components.json | 21 ++++++++++ client/index.html | 2 +- client/other/App copy.tsx | 67 +++++++++++++++++++++++++++++++ client/package-lock.json | 56 +++++++++++++++++++++++++- client/package.json | 7 +++- client/src/App.css | 45 +-------------------- client/src/App.tsx | 62 ++-------------------------- client/src/components/Header.tsx | 22 ++++++++++ client/src/index.css | 69 -------------------------------- client/src/layout/Layout.tsx | 20 +++++++++ client/tsconfig.json | 11 ++++- 11 files changed, 206 insertions(+), 176 deletions(-) create mode 100644 client/components.json create mode 100644 client/other/App copy.tsx create mode 100644 client/src/components/Header.tsx create mode 100644 client/src/layout/Layout.tsx diff --git a/client/components.json b/client/components.json new file mode 100644 index 0000000..cfbafe2 --- /dev/null +++ b/client/components.json @@ -0,0 +1,21 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "src/styles/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "iconLibrary": "lucide" +} \ No newline at end of file diff --git a/client/index.html b/client/index.html index a6c12cc..ad34c80 100644 --- a/client/index.html +++ b/client/index.html @@ -1,4 +1,4 @@ - + diff --git a/client/other/App copy.tsx b/client/other/App copy.tsx new file mode 100644 index 0000000..ba1e50e --- /dev/null +++ b/client/other/App copy.tsx @@ -0,0 +1,67 @@ +import React, { useState } from "react"; +import "./App.css"; +import Header from "./Header"; + +function App() { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + try { + const response = await fetch("http://localhost:5002/api/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + username, + password, + }), + }); + + if (response.ok) { + console.log("Login successful"); + // Handle successful login here + } else { + console.log("Login failed"); + // Handle login error here + } + } catch (error) { + console.error("Login error:", error); + } + }; + + return ( + <> +
+
+ + setUsername(e.target.value)} + required + /> +
+
+ + setPassword(e.target.value)} + required + /> +
+ +
+ + ); +} + +export default App; diff --git a/client/package-lock.json b/client/package-lock.json index 1b7687b..940c328 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -9,8 +9,13 @@ "version": "0.0.0", "dependencies": { "@tailwindcss/vite": "^4.1.11", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.525.0", "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "tailwind-merge": "^3.3.1", + "tw-animate-css": "^1.3.5" }, "devDependencies": { "@eslint/js": "^9.30.1", @@ -2441,6 +2446,27 @@ "node": ">=18" } }, + "node_modules/class-variance-authority": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz", + "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "^2.1.1" + }, + "funding": { + "url": "https://polar.sh/cva" + } + }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3542,6 +3568,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.525.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz", + "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", @@ -4098,6 +4133,16 @@ "dev": true, "license": "MIT" }, + "node_modules/tailwind-merge": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz", + "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "4.1.11", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz", @@ -4214,6 +4259,15 @@ "devOptional": true, "license": "0BSD" }, + "node_modules/tw-animate-css": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.5.tgz", + "integrity": "sha512-t3u+0YNoloIhj1mMXs779P6MO9q3p3mvGn4k1n3nJPqJw/glZcuijG2qTSN4z4mgNRfW5ZC3aXJFLwDtiipZXA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Wombosvideo" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/client/package.json b/client/package.json index 4998bc8..0d30e82 100644 --- a/client/package.json +++ b/client/package.json @@ -12,8 +12,13 @@ }, "dependencies": { "@tailwindcss/vite": "^4.1.11", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.525.0", "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "tailwind-merge": "^3.3.1", + "tw-animate-css": "^1.3.5" }, "devDependencies": { "@eslint/js": "^9.30.1", diff --git a/client/src/App.css b/client/src/App.css index b00042a..a461c50 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,44 +1 @@ -@import "tailwindcss"; - -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} +@import "tailwindcss"; \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx index 9459cc7..b081ddc 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -1,65 +1,11 @@ -import React, { useState } from "react"; import "./App.css"; +import Layout from "./layout/layout"; function App() { - const [username, setUsername] = useState(""); - const [password, setPassword] = useState(""); - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - try { - const response = await fetch("http://localhost:5002/api/login", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - username, - password, - }), - }); - - if (response.ok) { - console.log("Login successful"); - // Handle successful login here - } else { - console.log("Login failed"); - // Handle login error here - } - } catch (error) { - console.error("Login error:", error); - } - }; - return ( - <> -
-
- - setUsername(e.target.value)} - required - /> -
-
- - setPassword(e.target.value)} - required - /> -
- -
- + +

Test

+ ); } diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx new file mode 100644 index 0000000..6fd7985 --- /dev/null +++ b/client/src/components/Header.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +const Header: React.FC = () => { + return ( +
+
+

Bikelane Web

+ +
+
+ ); +}; + +export default Header; diff --git a/client/src/index.css b/client/src/index.css index 444f889..f1d8c73 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,70 +1 @@ @import "tailwindcss"; - -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/client/src/layout/Layout.tsx b/client/src/layout/Layout.tsx new file mode 100644 index 0000000..04af9f4 --- /dev/null +++ b/client/src/layout/Layout.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import Header from "../components/Header"; + +type LayoutProps = { + children: React.ReactNode; +}; + +const Layout: React.FC = ({ children }) => { + return ( +
+
+
{children}
+ +
+ ); +}; + +export default Layout; diff --git a/client/tsconfig.json b/client/tsconfig.json index 1ffef60..ab25a4f 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -3,5 +3,12 @@ "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } - ] -} + ], + + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["./*"] + } + } +} \ No newline at end of file