From ed464924b97f5a959d56abd07c14390bf0d62ae5 Mon Sep 17 00:00:00 2001 From: NekoVari Date: Wed, 11 Dec 2024 15:35:36 +0700 Subject: [PATCH] Add Router, warningPage, namePage ,customInput and change style of button --- package-lock.json | 70 ++++++++++++++++++++++++++- package.json | 3 +- src/css/customButton.css | 16 +++--- src/css/customInput.css | 15 ++++++ src/css/global.css | 5 ++ src/main.jsx | 12 ++++- src/pages/components/customButton.jsx | 12 +++-- src/pages/homePage.jsx | 7 ++- src/pages/namePage.jsx | 38 +++++++++++++++ src/pages/warningPage.jsx | 36 ++++++++++++++ 10 files changed, 198 insertions(+), 16 deletions(-) create mode 100644 src/css/customInput.css create mode 100644 src/pages/namePage.jsx create mode 100644 src/pages/warningPage.jsx diff --git a/package-lock.json b/package-lock.json index 833e2a6..44d1213 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^7.0.2" }, "devDependencies": { "@eslint/js": "^9.13.0", @@ -1264,6 +1265,12 @@ "@babel/types": "^7.20.7" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -1695,6 +1702,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", @@ -3575,6 +3591,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.2.tgz", + "integrity": "sha512-m5AcPfTRUcjwmhBzOJGEl6Y7+Crqyju0+TgTQxoS4SO+BkWbhOrcfZNq6wSWdl2BBbJbsAoBUb8ZacOFT+/JlA==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.2.tgz", + "integrity": "sha512-VJOQ+CDWFDGaWdrG12Nl+d7yHtLaurNgAQZVgaIy7/Xd+DojgmYLosFfZdGz1wpxmjJIAkAMVTKWcvkx1oggAw==", + "license": "MIT", + "dependencies": { + "react-router": "7.0.2" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz", @@ -3738,6 +3794,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/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -3953,6 +4015,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 89ef57d..5ba7baf 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^7.0.2" }, "devDependencies": { "@eslint/js": "^9.13.0", diff --git a/src/css/customButton.css b/src/css/customButton.css index 493e7fb..097f514 100644 --- a/src/css/customButton.css +++ b/src/css/customButton.css @@ -1,13 +1,17 @@ button { - height: 1.2cm; text-decoration: none; - font-weight: bold; - border-radius: 0.6cm; - padding: 0cm 0.75cm 0cm 0.75cm; - margin-right: 0.25cm; - margin-bottom: 0.25cm; + font-size: 20pt; + font-weight: 900; + text-align: center; + + border: none; + border-radius: 30px; + padding: 8px 52px 8px 52px; transition-duration: 0.2s; display: flex; align-items: center; } +button.gray{ + background-color: #222222; +} diff --git a/src/css/customInput.css b/src/css/customInput.css new file mode 100644 index 0000000..cac4a14 --- /dev/null +++ b/src/css/customInput.css @@ -0,0 +1,15 @@ +.input{ + background-color: #ffffff; + color: #000; + text-decoration: none; + font-size: 20pt; + font-weight: 700; + text-align: center; + + border: none; + border-radius: 30px; + padding: 8px 52px 8px 52px; + transition-duration: 0.2s; + display: flex; + align-items: center; +} \ No newline at end of file diff --git a/src/css/global.css b/src/css/global.css index 99e3c10..4001b27 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -21,3 +21,8 @@ body { font-weight: 900; text-align: center; } +.body { + font-size: 24pt; + font-weight: 400; + text-align: center; +} diff --git a/src/main.jsx b/src/main.jsx index f3c5297..b7abab8 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,20 @@ +import * as React from 'react'; import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' +import { BrowserRouter, Routes, Route } from 'react-router-dom'; import './css/global.css' import HomePage from './pages/homePage.jsx' +import WarningPage from './pages/warningPage.jsx'; +import NamePage from './pages/namePage.jsx'; createRoot(document.getElementById('root')).render( - + + + } /> + } /> + }/> + + , ) diff --git a/src/pages/components/customButton.jsx b/src/pages/components/customButton.jsx index c5782ee..f6e2d23 100644 --- a/src/pages/components/customButton.jsx +++ b/src/pages/components/customButton.jsx @@ -1,10 +1,12 @@ import '../../css/customButton.css' +import { useNavigate } from 'react-router-dom'; -function BlackButton({ text }) { +function BlackButton({ text , to="/"}) { + const navigate = useNavigate(); - return( - - ) - } + return( + + ) +} export default BlackButton \ No newline at end of file diff --git a/src/pages/homePage.jsx b/src/pages/homePage.jsx index f2c92d6..57dbda6 100644 --- a/src/pages/homePage.jsx +++ b/src/pages/homePage.jsx @@ -13,8 +13,11 @@ function HomePage() { height: '100vh', flexDirection: 'column', }}> - Fifty Shades
of Bully - + + +
+ +
) } diff --git a/src/pages/namePage.jsx b/src/pages/namePage.jsx new file mode 100644 index 0000000..94ec2f7 --- /dev/null +++ b/src/pages/namePage.jsx @@ -0,0 +1,38 @@ +import '../css/global.css' +import '../css/customInput.css' +import BlackButton from './components/customButton' +import { useState } from 'react'; + +function NamePage() { + const [name, setName] = useState(''); + + return ( +
+ + +
+ + setName(e.target.value)}/> + +
+ { + name==''? + <> + : + + } +
+ ) +} + +export default NamePage \ No newline at end of file diff --git a/src/pages/warningPage.jsx b/src/pages/warningPage.jsx new file mode 100644 index 0000000..22afe15 --- /dev/null +++ b/src/pages/warningPage.jsx @@ -0,0 +1,36 @@ +import { useState } from 'react' +import '../css/global.css' +import { useNavigate } from 'react-router-dom'; + +function WarningPage() { + const navigate = useNavigate(); + + return( +
{navigate('/name', { replace: true })}} + > + + +
+ + +
+ ) +} + +export default WarningPage