add elements and pages

This commit is contained in:
ilia 2023-05-19 18:17:34 +03:00
parent f63a1104d9
commit 3002d97424
21 changed files with 2367 additions and 1 deletions

2076
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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"
}, },

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@ -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() {

View 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>
}

View File

@ -0,0 +1,5 @@
.block{
background: #FFFBF3;
border-radius: 20px;
padding: 20px;
}

View 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>
}

View File

@ -0,0 +1,9 @@
.button{
background-color: #F5DFB880;
border-radius: 10px;
padding: 15px 50px;
outline: none;
border: none;
width: 100%;
cursor: pointer;
}

View 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>
}

View 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;
}

View 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}/>
}

View 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;
}

View 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>
}

View File

@ -0,0 +1,9 @@
.tinder-block{
width: 700px;
display: flex;
justify-content: center;
}
.main-btn{
background-color: #FFCF08;
}

View 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
View File

@ -0,0 +1,6 @@
import react from 'react'
export const Main: react.FC = () => {
return <div>Main</div>
}

View 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>
}

View 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;
}

View File

@ -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>
} }
] ]

View File

@ -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"
] ]
} }