Skip to content

T
tripsent
Commit d54d4472 authored by Джумалиев Алмат's avatar Джумалиев Алмат
Browse files
Options

Этап 6 выполнен

parent 440f9719
Hide whitespace changes
Inline Side-by-side
Showing with 352 additions and 6 deletions
package-lock.json
View file @ d54d4472
......@@ -8,21 +8,34 @@
"name": "tripsend",
"version": "0.1.0",
"dependencies": {
"@reduxjs/toolkit": "^2.8.2",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"react-redux": "^9.2.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/react-redux": "^7.1.34",
"eslint": "^9",
"eslint-config-next": "15.3.4",
"prettier": "^3.6.2",
"typescript": "^5"
}
},
"node_modules/@babel/runtime": {
"version": "7.27.6",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
"integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@emnapi/core": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
......@@ -877,6 +890,32 @@
"node": ">=12.4.0"
}
},
"node_modules/@reduxjs/toolkit": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
"integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
"license": "MIT",
"dependencies": {
"@standard-schema/spec": "^1.0.0",
"@standard-schema/utils": "^0.3.0",
"immer": "^10.0.3",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"reselect": "^5.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@rtsao/scc": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
......@@ -891,6 +930,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/@standard-schema/spec": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
"integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
"license": "MIT"
},
"node_modules/@standard-schema/utils": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
"license": "MIT"
},
"node_modules/@swc/counter": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
......@@ -924,6 +975,17 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.6",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
"integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"node_modules/@types/json-schema": {
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
......@@ -952,7 +1014,7 @@
"version": "19.1.8",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
"integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
"dev": true,
"devOptional": true,
"license": "MIT",
"dependencies": {
"csstype": "^3.0.2"
......@@ -968,6 +1030,35 @@
"@types/react": "^19.0.0"
}
},
"node_modules/@types/react-redux": {
"version": "7.1.34",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
"integrity": "sha512-GdFaVjEbYv4Fthm2ZLvj1VSCedV7TqE5y1kNwnjSdBOTXuRSgowux6J8TAct15T3CKBr63UMk+2CO7ilRhyrAQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"node_modules/@types/react-redux/node_modules/redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/@types/use-sync-external-store": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
"license": "MIT"
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.0.tgz",
......@@ -2026,7 +2117,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"dev": true,
"devOptional": true,
"license": "MIT"
},
"node_modules/damerau-levenshtein": {
......@@ -3221,6 +3312,16 @@
"node": ">= 0.4"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dev": true,
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/ignore": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
......@@ -3231,6 +3332,16 @@
"node": ">= 4"
}
},
"node_modules/immer": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-fresh": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
......@@ -4407,6 +4518,44 @@
"dev": true,
"license": "MIT"
},
"node_modules/react-redux": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"license": "MIT",
"dependencies": {
"@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0"
},
"peerDependencies": {
"@types/react": "^18.2.25 || ^19",
"react": "^18.0 || ^19",
"redux": "^5.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/redux": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT"
},
"node_modules/redux-thunk": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
"license": "MIT",
"peerDependencies": {
"redux": "^5.0.0"
}
},
"node_modules/reflect.getprototypeof": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
......@@ -4451,6 +4600,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
"license": "MIT"
},
"node_modules/resolve": {
"version": "1.22.10",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
......@@ -5290,6 +5445,15 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
......
package.json
View file @ d54d4472
......@@ -9,15 +9,18 @@
"lint": "next lint"
},
"dependencies": {
"@reduxjs/toolkit": "^2.8.2",
"next": "15.3.4",
"react": "^19.0.0",
"react-dom": "^19.0.0"
"react-dom": "^19.0.0",
"react-redux": "^9.2.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/react-redux": "^7.1.34",
"eslint": "^9",
"eslint-config-next": "15.3.4",
"prettier": "^3.6.2",
......
src/app/global.css
View file @ d54d4472
......@@ -2,4 +2,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Suisse Intl, sans-serif;
}
\ No newline at end of file
src/components/Registration/Registration.module.css 0 → 100644
View file @ d54d4472
.Registration {
min-width: 320px;
margin: 0 auto;
}
.RegistrationContainer {
width: 320px;
min-height: 50px;
margin: 0 auto;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.RegistrationContainer h2{
margin-top: 15px;
width: 250px;
color: #003366;
}
src/components/Registration/Registration.tsx 0 → 100644
View file @ d54d4472
'use client'
import { TUser } from '@/types/TUser'
import Input from '../UI/Input/Input'
import styles from './Registration.module.css'
import { ChangeEvent, FormEvent, useState } from 'react'
import Button from '../UI/Button/Button'
export default function Registration() {
const [user, setUser] = useState<TUser>({
firstName: '',
lastName: '',
email: '',
password: ''
})
const handleSave = (user: TUser) => {
console.log(user)
}
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault()
if(!user.firstName.trim() && !user.lastName.trim() && !user.email.trim() && !user.password.trim()) return
const newUser: TUser = {
firstName: user.firstName,
lastName: user.lastName,
email: user.email,
password: user.password
}
handleSave(newUser)
setUser({
firstName: '',
lastName: '',
email: '',
password: ''
})
}
const handleChange = (e:ChangeEvent<HTMLInputElement>)=>{
const {name, value} = e.target
setUser(prev=> ({...prev, [name]: value}))
}
return (
<div className={styles.Registration}>
<div className={styles.RegistrationContainer}>
<img
src="/tripsend.png"
alt="Логотип"
width={128}
height={30}
/>
<h2>To accept the order, you need to Sign Up</h2>
<form onSubmit={handleSubmit} className={styles.RegistrationForm}>
<Input
type='text'
label='First name'
onChange={handleChange}
placeholder='John'
name='firstName'
value={user.firstName}
/>
<Input
type='text'
label='Last name'
onChange={handleChange}
placeholder='Doe'
name='lastName'
value={user.lastName}
/>
<Input
type='email'
label='First name'
onChange={handleChange}
placeholder='email'
name='email'
value={user.email}
/>
<Input
type='password'
label='Password'
onChange={handleChange}
placeholder='password'
value={user.password}
name='email'
/>
<p>Already got an account?<span>Sign In</span></p>
<Button
type='darkBlue'
onClick={() => {}}
title='Sign Up'
/>
</form>
</div>
</div>
)
}
\ No newline at end of file
src/components/UI/Input/Input.module.css 0 → 100644
View file @ d54d4472
.Input {
width: 300px;
padding: 10px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
margin-top: 15px;
}
.InputLabel {
color: #003366;
font-size: 16px;
font-weight: 500;
}
.InputInput {
width: 280px;
padding: 15px;
margin-top: 10px;
border-radius: 10px;
border: 1px solid #cdf5db;
}
\ No newline at end of file
src/components/UI/Input/Input.tsx 0 → 100644
View file @ d54d4472
import styles from './Input.module.css'
type Props = {
label?: string
type?: string
name?: string
placeholder?: string
value?: string
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
disabled?: boolean
}
const Input = ({label, type, name, placeholder, value, onChange, disabled}: Props) => {
return (
<div className={styles.Input}>
{label && <label className={styles.InputLabel}>{label}</label>}
<input
type={type}
name={name}
placeholder={placeholder}
value={value}
onChange={onChange}
disabled={disabled}
className={styles.InputInput}
/>
</div>
)
}
export default Input
\ No newline at end of file
src/pages/Home/Home.tsx
View file @ d54d4472
import Registration from "@/components/Registration/Registration"
const Home = () => {
return (
<>
<h1>Home Page</h1></>
<Registration/>
)
}
......
src/types/TUser.ts 0 → 100644
View file @ d54d4472
export type TUser = {
firstName: string
lastName: string
email: string
password: string
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment