add generate logic

package-lock.json

@@ -22,6 +22,7 @@
         "@yandex/ui": "^3.33.0",
         "antd": "^5.5.0",
         "axios": "^1.4.0",
+        "gl-matrix": "^3.4.3",
         "mapbox-gl": "^2.14.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-spring/web": "^9.7.2",
     "@bem-react/classname": "^1.6.0",
     "@bem-react/core": "^5.1.0",
     "@bem-react/di": "^5.0.0",
+    "@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",
@@ -17,6 +17,7 @@
     "@yandex/ui": "^3.33.0",
     "antd": "^5.5.0",
     "axios": "^1.4.0",
+    "gl-matrix": "^3.4.3",
     "mapbox-gl": "^2.14.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -3,7 +3,6 @@ import { Register } from './pages/Register';
 import { MyMap } from './сomponents/map';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
-configureRootTheme({ theme })
 
 function App() {
   return (

src/elements/TourCard/index.tsx

@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useState } from "react";
 import { Button } from '../../elements/Button'
 import { Block } from '../../elements/Block'
 import './style.css'
+import { MyMap } from "../../сomponents/map";
 
 export interface PlaceCardIE{
     title:string,
@@ -30,28 +31,40 @@ export const PlaceCard: React.FC<PlaceCardIE> = (props) =>{
 
 export const TourCard:React.FC<TourCardIE> = (props) =>{
     
+    const [showMap, setShowMap] = useState(false)
+
 
     return(
-        <Block className='tourcard-block'>
+        <div>
-            <div className="cardDescr">
+            {showMap? <div>
-                <div className="cardTitle">
+                <Block  className='tourcard-block'>
-                    <div className="titleText">{props.title}</div>
+                    <MyMap></MyMap>
-                    <div className="cardInfo">
+                    <Button className='btn-y' onClick={()=>setShowMap(!showMap)}>Закрыть</Button>
-                        <div>{props.days} дней,</div>
-                        <div>{props.placeCards.length} мест</div>
-                    </div>
-                </div>
-                <img  className="cardAvatar" src={props.imageURL}></img>
-                
-            </div>
-            <div className="placesWrapper">
-                {
-                    props.placeCards.map((value, index) => <PlaceCard {...value}></PlaceCard>)
-                }
-            </div>
-            <Button className=''>Посмотреть</Button>
 
-        </Block>
+                </Block>
+            </div>:null}
+            <Block className='tourcard-block'>
+                <div className="cardDescr">
+                    <div className="cardTitle">
+                        <div className="titleText">{props.title}</div>
+                        <div className="cardInfo">
+                            <div>{props.days} дней,</div>
+                            <div>{props.placeCards.length} мест</div>
+                        </div>
+                    </div>
+                    <img  className="cardAvatar" src={props.imageURL}></img>
+                    
+                </div>
+                <div className="placesWrapper">
+                    {
+                        props.placeCards.map((value, index) => <PlaceCard {...value}></PlaceCard>)
+                    }
+                </div>
+                <Button className='' onClick={()=>setShowMap(!showMap)}>Посмотреть</Button>
+
+            </Block>
+        </div>
+        
     );
 
     

src/pages/GenerateTour/index.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { DatePicker, Select } from 'antd';
+import { RusPassHeader } from "../../elements/Header";
+import { Block } from "../../elements/Block";
+import { Button } from "../../elements/Button";
+import { TourCard, TourCardIE } from "../../elements/TourCard";
+
+const { RangePicker } = DatePicker;
+
+export const GenerateTour = () =>{
+    
+    const [dates, setDates] = useState()
+    const [theme, setTheme] = useState('jack')
+
+    const [generate, setGenerate] = useState(false)
+
+
+
+    const TourPropsCard = {
+        title: 'Я покажу тебе Москву',
+        days: 8,
+        imageURL: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+        placeCards: [
+           {
+              title:'Парк Горького',
+              type: 'Место',
+              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+           },
+           {
+              title:'Отель Москва',
+              type: 'Отель',
+              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+           },
+           {
+              title:'Ресторан Сказка',
+              type: 'Ресторан',
+              imageURL:'https://images.unsplash.com/photo-1575936123452-b67c3203c357?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
+           }
+        ]
+     } as TourCardIE
+     
+    let tours = []
+
+    for (let i=0; i<=5; i++){
+        tours.push(
+            <TourCard {...TourPropsCard}></TourCard>
+        )
+    }
+
+    return(
+        <div>
+            <RusPassHeader></RusPassHeader>
+            <div>
+                <Block className="">
+                    <div>
+                        <RangePicker
+                            onChange={(e)=>setDates(e as any)}
+                        ></RangePicker>
+                        <Select
+                            defaultValue="lucy"
+                            style={{ width: 120 }}
+                            value={theme}
+                            onChange={(e)=>setTheme(e)}
+                            options={[
+                                { value: 'jack', label: 'Jack' },
+                                { value: 'lucy', label: 'Lucy' },
+                                { value: 'Yiminghe', label: 'yiminghe' },
+                                { value: 'disabled', label: 'Disabled'},
+                            ]}
+                        />
+                        <Button onClick={()=>setGenerate(!generate)} className="btn-y">Сгенирировать</Button>
+                    </div>
+                    
+                    <div>
+                        {
+                            generate? tours:null
+                        }
+                    </div>
+
+                </Block>
+            </div>
+        </div>
+    );
+}

src/pages/GenerateTour/style.css

@@ -0,0 +1,9 @@
+.btn-y{
+    width: 200px!important;
+    background-color: #FFCF08;
+    border-radius: 10px;
+    padding: 15px 50px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+}

src/router.tsx

@@ -6,6 +6,7 @@ import { Register } from './pages/Register';
 import { Login } from './pages/Login';
 import { Main } from './pages/Main';
 import { EventMatch } from './pages/EventMatch';
+import { GenerateTour } from './pages/GenerateTour';
 
 
 const routes = [
@@ -28,7 +29,12 @@ const routes = [
     {
         path: '/event-match',
         element: <EventMatch></EventMatch>
+    },
+    {
+        path: '/generate',
+        element: <GenerateTour></GenerateTour>
     }
+
 ]
 
 export const router = createBrowserRouter(routes);