add elements and pages

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-spring/web": "^9.7.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,10 +11,14 @@
     "@types/node": "^16.18.31",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "@yandex/ui": "^3.33.0",
+    "antd": "^5.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-tinder-card": "^1.6.2",
+    "react-yandex-login": "^1.0.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

public/index.html

@@ -38,6 +38,15 @@
 
       To begin the development, run `npm start` or `yarn start`.
       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>
 </html>

src/App.tsx

@@ -1,4 +1,9 @@
 import React from 'react';
+import { configureRootTheme } from '@yandex/ui/Theme'
+import { theme } from '@yandex/ui/Theme/presets/default'
+
+
+configureRootTheme({ theme })
 
 
 function App() {

src/elements/Block/index.tsx

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

src/elements/Block/style.css

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

src/elements/Button/index.tsx

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

src/elements/Button/style.css

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

src/elements/Card/index.tsx

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

src/elements/Card/style.css

@@ -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;
+}

src/elements/Input/index.tsx

@@ -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}/>
+}

src/elements/Input/style.css

@@ -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;
+}

src/pages/EventMatch/index.tsx

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

src/pages/EventMatch/style.css

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

src/pages/Login/index.tsx

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

src/pages/Main/index.tsx

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

src/pages/Register/index.tsx

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

src/pages/Register/style.css

@@ -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;
+}

src/router.tsx

@@ -2,12 +2,32 @@ import {
     createBrowserRouter
 } from 'react-router-dom'
 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 = [
     {
         path: '/index',
         element: <App></App>
+    },
+    {
+        path: '/register',
+        element: <Register></Register>
+    },
+    {
+        path: '/login',
+        element: <Login></Login>
+    },
+    {
+        path: '/',
+        element: <Main></Main>
+    },
+    {
+        path: '/event-match',
+        element: <EventMatch></EventMatch>
     }
 ]
 

tsconfig.json

@@ -7,6 +7,7 @@
       "esnext"
     ],
     "allowJs": true,
+    "checkJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -21,6 +22,7 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src",
+    "src/**/*.js"
   ]
 }