diff --git a/README.md b/README.md index 4866cf0..18905eb 100644 --- a/README.md +++ b/README.md @@ -1,73 +1,29 @@ -# React + TypeScript + Vite +# PepperPlus UI -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +## Installation -Currently, two official plugins are available: +First a description of how to install Node, then how to install this project. -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +### Node -## React Compiler +Install Node 20.19 or higher. -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). +Choose one of the options from [the Node.js website](https://nodejs.org/en/download). On Windows, the installer option seems easiest. On Linux (or macOS) you can use `nvm`. On macOS you can also use `brew`. -## Expanding the ESLint configuration +### Project -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: +With a terminal in the project directory, run: -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, - - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +```shell +npm i ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: +## Running -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' +You can run the project from a terminal with: -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +```shell +npm run dev ``` + +It should automatically reload when you save changes. diff --git a/package-lock.json b/package-lock.json index c11331b..0b92f5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^19.1.1", - "react-dom": "^19.1.1" + "react-dom": "^19.1.1", + "react-router": "^7.9.3" }, "devDependencies": { "@eslint/js": "^9.36.0", @@ -1949,6 +1950,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2921,6 +2931,28 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.9.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz", + "integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3024,6 +3056,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 6ed4958..6070bd8 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^19.1.1", - "react-dom": "^19.1.1" + "react-dom": "^19.1.1", + "react-router": "^7.9.3" }, "devDependencies": { "@eslint/js": "^9.36.0", diff --git a/src/App.css b/src/App.css index b9d355d..dcb46cf 100644 --- a/src/App.css +++ b/src/App.css @@ -18,6 +18,20 @@ filter: drop-shadow(0 0 2em #61dafbaa); } + +.logopepper { + height: 8em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logopepper:hover { + filter: drop-shadow(0 0 10em #ff0707); +} +.logopepper.react:hover { + filter: drop-shadow(0 0 10em #4eff14aa); +} + @keyframes logo-spin { from { transform: rotate(0deg); @@ -27,16 +41,75 @@ } } + +@keyframes logo-pepper-spin { + from { + transform: rotate(-20deg); + } + to { + transform: rotate(20deg); + } +} + + + +@keyframes logo-pepper-scale { + from { + transform: scale(1,1); + } + to { + transform: scale(1.5,1.5); + } +} + @media (prefers-reduced-motion: no-preference) { a:nth-of-type(2) .logo { animation: logo-spin infinite 20s linear; } } -.card { - padding: 2em; +@media (prefers-reduced-motion: no-preference) { + .logopepper { + animation: logo-pepper-spin infinite 1s linear alternate; + } } -.read-the-docs { - color: #888; +@media (prefers-reduced-motion: no-preference) { + .logoPepperScaling { + animation: logo-pepper-scale infinite 1s linear alternate; + } +} + + + + + +button.reset { + background-color: crimson; + color: white; +} +button.reset:hover { + background-color: darkred; +} + +button.movePage { + position: fixed; /* Position the button relative to the viewport (screen), + not inside its parent. It stays in place even when you scroll. */ + + top: 50%; /* Place the button halfway down from the top of the screen. */ + /* Stick the button to the left edge of the screen. */ + border: 3px solid black; + outline: 1px solid white; + transform: translateY(-50%); + background-color: aquamarine; + color: white; +} +button.movePage.left{ + left: 5%; +} +button.movePage.right{ + right: 5%; +} +button.movePage:hover{ + background-color: rgb(0, 176, 176); } diff --git a/src/App.tsx b/src/App.tsx index 53505d5..8c9d79d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ import { useState, useEffect } from 'react' +import { Routes, Route } from 'react-router' import './App.css' +import TemplatePage from './pages/TemplatePage/Template.tsx' +import Home from './pages/Home/Home.tsx' function App() { const [message, setMessage] = useState(''); @@ -61,6 +64,15 @@ function App() { ); +/* + function App(){ + + return ( + + } /> + } /> + + ) } - +*/ export default App diff --git a/src/assets/pepper_transp2.svg b/src/assets/pepper_transp2.svg new file mode 100644 index 0000000..41c502b --- /dev/null +++ b/src/assets/pepper_transp2.svg @@ -0,0 +1,1882 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/pepper_transp2_small.svg b/src/assets/pepper_transp2_small.svg new file mode 100644 index 0000000..242dd63 --- /dev/null +++ b/src/assets/pepper_transp2_small.svg @@ -0,0 +1,1241 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/vite.svg b/src/assets/vite.svg similarity index 100% rename from public/vite.svg rename to src/assets/vite.svg diff --git a/src/components/components.tsx b/src/components/components.tsx new file mode 100644 index 0000000..d323843 --- /dev/null +++ b/src/components/components.tsx @@ -0,0 +1,20 @@ +// src/components/Counter.tsx +import { useState } from 'react' +//import style from './Counter.module.css' // optional, if you want a CSS module for reset button +import '../App.css' + +function Counter() { + const [count, setCount] = useState(0) + + return ( +
+ + +
+ ) +} +export default Counter \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index bef5202..ae3d161 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,13 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' +import { BrowserRouter } from 'react-router' import './index.css' import App from './App.tsx' createRoot(document.getElementById('root')!).render( - + + + , ) diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css new file mode 100644 index 0000000..aed0f27 --- /dev/null +++ b/src/pages/Home/Home.module.css @@ -0,0 +1,6 @@ +.read_the_docs { + color: #888; +} +.card { + padding: 2em; +} diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx new file mode 100644 index 0000000..5c4a72d --- /dev/null +++ b/src/pages/Home/Home.tsx @@ -0,0 +1,49 @@ +import { useState } from 'react' +import { Link } from 'react-router' +import reactLogo from '../../assets/react.svg' +import viteLogo from '../../assets/vite.svg' +import pepperLogo from '../../assets/pepper_transp2_small.svg' +import style from './Home.module.css' +import Counter from '../../components/components.tsx' + +function Home() { + + + + return ( + <> +
+
+ + Pepper logo + +
+ + + Vite logo + + + React logo + +
+

Vite + React

+ + + + + + +

+ Edit src/App.tsx and save to test HMR +

+ +

+ Click on the Vite and React logos to learn more +

+ + ) +} + +export default Home \ No newline at end of file diff --git a/src/pages/TemplatePage/Template.module.css b/src/pages/TemplatePage/Template.module.css new file mode 100644 index 0000000..8526661 --- /dev/null +++ b/src/pages/TemplatePage/Template.module.css @@ -0,0 +1,4 @@ +button.reset:hover { + background-color: yellow; +} + diff --git a/src/pages/TemplatePage/Template.tsx b/src/pages/TemplatePage/Template.tsx new file mode 100644 index 0000000..4cb3118 --- /dev/null +++ b/src/pages/TemplatePage/Template.tsx @@ -0,0 +1,24 @@ +import { useState } from 'react' +import { Link } from 'react-router' +import Counter from '../../components/components.tsx' +import style from './Template.module.css' + +//this is your css file where you can style your buttons and such +//you can still use css parts from App.css, but also overwrite them + +function TemplatePage() { + + + return ( + <> + + {/* here you link to the homepage, in App.tsx you can link new pages */} + + + + ) +} + +export default TemplatePage \ No newline at end of file