mirror of
https://github.com/task-17-lct/frontend.git
synced 2024-11-10 22:36:35 +03:00
add elements and pages
This commit is contained in:
parent
f63a1104d9
commit
3002d97424
2076
package-lock.json
generated
2076
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -3,6 +3,7 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@react-spring/web": "^9.7.2",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
@ -10,10 +11,14 @@
|
||||||
"@types/node": "^16.18.31",
|
"@types/node": "^16.18.31",
|
||||||
"@types/react": "^18.2.6",
|
"@types/react": "^18.2.6",
|
||||||
"@types/react-dom": "^18.2.4",
|
"@types/react-dom": "^18.2.4",
|
||||||
|
"@yandex/ui": "^3.33.0",
|
||||||
|
"antd": "^5.5.0",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.11.2",
|
"react-router-dom": "^6.11.2",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"react-tinder-card": "^1.6.2",
|
||||||
|
"react-yandex-login": "^1.0.2",
|
||||||
"typescript": "^4.9.5",
|
"typescript": "^4.9.5",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
|
|
|
@ -38,6 +38,15 @@
|
||||||
|
|
||||||
To begin the development, run `npm start` or `yarn start`.
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
To create a production bundle, use `npm run build` or `yarn build`.
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
background-color: #FAEDD7;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6, span {
|
||||||
|
color: #1D1D1D;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
BIN
public/sample.jpg
Normal file
BIN
public/sample.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 70 KiB |
|
@ -1,4 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { configureRootTheme } from '@yandex/ui/Theme'
|
||||||
|
import { theme } from '@yandex/ui/Theme/presets/default'
|
||||||
|
|
||||||
|
|
||||||
|
configureRootTheme({ theme })
|
||||||
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
14
src/elements/Block/index.tsx
Normal file
14
src/elements/Block/index.tsx
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
import react from 'react'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
interface IBlock{
|
||||||
|
children: string | react.ReactNode;
|
||||||
|
className: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Block: react.FC<IBlock> = (props) => {
|
||||||
|
|
||||||
|
return <div className={'block ' + props.className}>{(props as any).children}</div>
|
||||||
|
}
|
5
src/elements/Block/style.css
Normal file
5
src/elements/Block/style.css
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
.block{
|
||||||
|
background: #FFFBF3;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
19
src/elements/Button/index.tsx
Normal file
19
src/elements/Button/index.tsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import react from 'react'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
|
||||||
|
interface IButton {
|
||||||
|
children: string | react.ReactNode;
|
||||||
|
className: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Button: react.FC<IButton> = (props) => {
|
||||||
|
var onClick = props.onClick
|
||||||
|
if (!props.onClick) {
|
||||||
|
onClick = () => {}
|
||||||
|
}
|
||||||
|
return <button className={'button ' + props.className} onClick={props.onClick}>
|
||||||
|
{props.children}
|
||||||
|
</button>
|
||||||
|
}
|
9
src/elements/Button/style.css
Normal file
9
src/elements/Button/style.css
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
.button{
|
||||||
|
background-color: #F5DFB880;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px 50px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
25
src/elements/Card/index.tsx
Normal file
25
src/elements/Card/index.tsx
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
import react from 'react'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
interface ICard{
|
||||||
|
children: string | react.ReactNode;
|
||||||
|
className: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Card: react.FC<ICard> = (props) => {
|
||||||
|
|
||||||
|
return <div className={'card__container ' + props.className}>{props.children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TinderCardContent: react.FC = (props) => {
|
||||||
|
return <Card className='tinder-card__card'>
|
||||||
|
<img src='/sample.jpg' width={200} height={200}></img>
|
||||||
|
<div className="tinder__content">
|
||||||
|
<span><strong>Отель:</strong> Ромашка</span>
|
||||||
|
<span><strong>Звезд:</strong> 4</span>
|
||||||
|
|
||||||
|
<span><strong>Описание: </strong>Очень хороший отель с видом на море</span>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
}
|
36
src/elements/Card/style.css
Normal file
36
src/elements/Card/style.css
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
.card__container{
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
.tinder-card__card{
|
||||||
|
border-radius: 0px!important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: none!important;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tinder__content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: none!important;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
max-width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tin{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tin-dir{
|
||||||
|
display: flex;
|
||||||
|
width: 700px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-btn{
|
||||||
|
background-color: #FFCF08;
|
||||||
|
}
|
11
src/elements/Input/index.tsx
Normal file
11
src/elements/Input/index.tsx
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
import react from 'react'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
interface IInput{
|
||||||
|
placeholder: string;
|
||||||
|
className: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Input: react.FC<IInput> = (props) => {
|
||||||
|
return <input type="text" className={'input__container ' +props.className} placeholder={props.placeholder}/>
|
||||||
|
}
|
8
src/elements/Input/style.css
Normal file
8
src/elements/Input/style.css
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
.input__container{
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.04);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
38
src/pages/EventMatch/index.tsx
Normal file
38
src/pages/EventMatch/index.tsx
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
import react, { useRef } from 'react'
|
||||||
|
import TinderCard from 'react-tinder-card'
|
||||||
|
import './style.css'
|
||||||
|
import { Block } from '../../elements/Block'
|
||||||
|
import { Card, TinderCardContent } from '../../elements/Card'
|
||||||
|
import { Button } from '../../elements/Button'
|
||||||
|
|
||||||
|
|
||||||
|
export const EventMatch: react.FC = () => {
|
||||||
|
const ref = useRef(null);
|
||||||
|
var [createNew, setCreateNew] = react.useState(true);
|
||||||
|
|
||||||
|
|
||||||
|
return <div className='centered tin'>
|
||||||
|
<Block className='tinder-block'>
|
||||||
|
<TinderCard ref={ref} onSwipe={() => {
|
||||||
|
console.log("swipe");
|
||||||
|
setTimeout(() => {
|
||||||
|
(ref.current as any).restoreCard();
|
||||||
|
}, 2000);
|
||||||
|
}}>
|
||||||
|
<Card className=''>
|
||||||
|
<TinderCardContent></TinderCardContent>
|
||||||
|
</Card>
|
||||||
|
</TinderCard>
|
||||||
|
</Block>
|
||||||
|
|
||||||
|
<Block className='tin-dir'>
|
||||||
|
<Button className='' onClick={() => {
|
||||||
|
(ref.current as any).swipe('left')
|
||||||
|
}}>Не нравится</Button>
|
||||||
|
<Button className='main-btn'>На главную</Button>
|
||||||
|
<Button className='' onClick={() => {
|
||||||
|
(ref.current as any).swipe('right')
|
||||||
|
}}>Нравится</Button>
|
||||||
|
</Block>
|
||||||
|
</div>
|
||||||
|
}
|
9
src/pages/EventMatch/style.css
Normal file
9
src/pages/EventMatch/style.css
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
.tinder-block{
|
||||||
|
width: 700px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-btn{
|
||||||
|
background-color: #FFCF08;
|
||||||
|
}
|
6
src/pages/Login/index.tsx
Normal file
6
src/pages/Login/index.tsx
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import react from 'react'
|
||||||
|
|
||||||
|
export const Login: react.FC = () => {
|
||||||
|
|
||||||
|
return <div>Login</div>
|
||||||
|
}
|
6
src/pages/Main/index.tsx
Normal file
6
src/pages/Main/index.tsx
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
import react from 'react'
|
||||||
|
|
||||||
|
export const Main: react.FC = () => {
|
||||||
|
|
||||||
|
return <div>Main</div>
|
||||||
|
}
|
32
src/pages/Register/index.tsx
Normal file
32
src/pages/Register/index.tsx
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
import react from 'react'
|
||||||
|
import { Block } from '../../elements/Block'
|
||||||
|
import { Input } from '../../elements/Input'
|
||||||
|
import './style.css'
|
||||||
|
import { Button } from '../../elements/Button'
|
||||||
|
|
||||||
|
const yandexConnect = require('react-yandex-login')
|
||||||
|
|
||||||
|
const {YandexLogin, YandexLogout} = yandexConnect;
|
||||||
|
const clientID = '11e53cfa7add4c55b84168d408a22eb1';
|
||||||
|
|
||||||
|
|
||||||
|
export const Register: react.FC = () => {
|
||||||
|
|
||||||
|
return <div className='centered'>
|
||||||
|
<Block className='reg-block'>
|
||||||
|
<h4>Регистрация</h4>
|
||||||
|
<Input placeholder='Почта' className='reg-input'/>
|
||||||
|
<Input placeholder='Пароль' className='reg-input'/>
|
||||||
|
<Input placeholder='Пароль еще раз' className='reg-input'/>
|
||||||
|
<Button className=''>Зарегистрироваться</Button>
|
||||||
|
<div className="separator">
|
||||||
|
<div className="sep-item"></div>
|
||||||
|
<span>или</span>
|
||||||
|
<div className="sep-item"></div>
|
||||||
|
</div>
|
||||||
|
<YandexLogin clientID={clientID} onSuccess={() => {}}>
|
||||||
|
<button className="btn-y">Yandex login</button>
|
||||||
|
</YandexLogin>
|
||||||
|
</Block>
|
||||||
|
</div>
|
||||||
|
}
|
31
src/pages/Register/style.css
Normal file
31
src/pages/Register/style.css
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
.centered{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reg-block{
|
||||||
|
padding-left: 50px;
|
||||||
|
padding-right: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reg-input{
|
||||||
|
display: block;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-y{
|
||||||
|
width: 440px!important;
|
||||||
|
background-color: #FFCF08;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px 50px;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
|
@ -2,12 +2,32 @@ import {
|
||||||
createBrowserRouter
|
createBrowserRouter
|
||||||
} from 'react-router-dom'
|
} from 'react-router-dom'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
import { Register } from './pages/Register';
|
||||||
|
import { Login } from './pages/Login';
|
||||||
|
import { Main } from './pages/Main';
|
||||||
|
import { EventMatch } from './pages/EventMatch';
|
||||||
|
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/index',
|
path: '/index',
|
||||||
element: <App></App>
|
element: <App></App>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/register',
|
||||||
|
element: <Register></Register>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
element: <Login></Login>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <Main></Main>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/event-match',
|
||||||
|
element: <EventMatch></EventMatch>
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
"esnext"
|
"esnext"
|
||||||
],
|
],
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
|
"checkJs": false,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"allowSyntheticDefaultImports": true,
|
"allowSyntheticDefaultImports": true,
|
||||||
|
@ -21,6 +22,7 @@
|
||||||
"jsx": "react-jsx"
|
"jsx": "react-jsx"
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"src"
|
"src",
|
||||||
|
"src/**/*.js"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user