+
+
+ );
+}
\ No newline at end of file
diff --git a/src/elements/AttractionCard/style.css b/src/elements/AttractionCard/style.css
new file mode 100644
index 0000000..f6386d4
--- /dev/null
+++ b/src/elements/AttractionCard/style.css
@@ -0,0 +1,93 @@
+.hotelCard{
+ width: 250px;
+ padding: 0px 15px 15px 15px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background: #F5F5F5;
+ border-radius: 20px;
+ height: 350px;
+
+}
+h3{
+ margin: 0px;
+}
+
+.likeHotelBtn{
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+}
+
+.likeHotelBtn:hover{
+ opacity: 0.5;
+}
+
+.ratingTile{
+ width: 40px;
+ height: 40px;
+ background: #007470;
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 18px;
+ color:white;
+ font-weight: 500;
+}
+
+.hotelCardTools{
+ position: relative;
+ top:15px;
+ display: flex;
+ flex-direction: row;
+ width: 250px;
+ justify-content: space-between;
+}
+
+.hotelCardRow{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap:15px;
+ font-size: 12px;
+}
+
+.hotelBtn{
+ margin-top: 15px;
+}
+
+.openHotelCardBG{
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(0,0,0, 0.2);
+ left: 0px;
+ top:0px;
+ width: 100%;
+ height: 100vh;
+ z-index: 10000;
+
+}
+
+
+.openHotelCard{
+ width: 75%;
+ height: 75vh;
+ overflow-y: scroll;
+ padding: 50px;
+ background-color: white;
+ z-index: 10000;
+ border-radius: 20px;
+}
+
+
+.hotelImg{
+ margin-top: -65px;
+ margin-left: -15px;
+ width: 280px;
+ height: 240px;
+}
\ No newline at end of file
diff --git a/src/elements/ChoiceIcon/index.tsx b/src/elements/ChoiceIcon/index.tsx
new file mode 100644
index 0000000..eab3a21
--- /dev/null
+++ b/src/elements/ChoiceIcon/index.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import './style.css'
+export interface ChoiceIconIE{
+ onChange: (key:string[]) => void
+ options:{
+ icon:string,
+ name: string,
+ key:string
+ }[]
+}
+
+export const ChoiceIcon:React.FC
+ 
+
+
+
+ ![]()
onLiked()} src={liked? 'icons/liked.svg':'icons/unliked.svg'}>
+
+
+
+ {props.title}
+
+
+ {props.description}
+ onChange(item.key, index)}>
+ 
+ {item.name}
+
+ )
+ })
+ return(
+
+ {
+ icons
+ }
+
+ );
+}
\ No newline at end of file
diff --git a/src/elements/ChoiceIcon/style.css b/src/elements/ChoiceIcon/style.css
new file mode 100644
index 0000000..72c150c
--- /dev/null
+++ b/src/elements/ChoiceIcon/style.css
@@ -0,0 +1,44 @@
+.choiceIconWrapper{
+ display: flex;
+ flex-direction: row;
+ gap:30px;
+ align-items: center;
+}
+
+.choiceBtn{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ border: 2px solid #FAEFDB;
+ background: #FAEFDB;
+ padding: 15px;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: 0.3s;
+}
+
+.choiceBtn:hover{
+ opacity: 0.5;
+}
+.choiceBtnActive{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 30px;
+ background: #FAEFDB;
+ border: 2px solid #FFCF08;
+ padding: 15px;
+ border-radius: 12px;
+ cursor: pointer;
+ transition: 0.3s;
+}
+.choiceBtnWrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap:10px
+}
\ No newline at end of file
diff --git a/src/elements/FavoriteCard/style.css b/src/elements/FavoriteCard/style.css
index 3ebc72c..ad2314a 100644
--- a/src/elements/FavoriteCard/style.css
+++ b/src/elements/FavoriteCard/style.css
@@ -11,8 +11,8 @@
transform: translateY(-60px) translateX(10px);
}
.likeButton:hover{
- transform: scale(1.1);
-}
+opacity: 0.5
+;}
.titleFavoriteCard{
margin-top: 10px;
font-size: 18px;
diff --git a/src/elements/HotelCard/index.tsx b/src/elements/HotelCard/index.tsx
new file mode 100644
index 0000000..79c0b04
--- /dev/null
+++ b/src/elements/HotelCard/index.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { Button } from "../Button";
+import './style.css'
+
+export interface HotelCardIE{
+ address:string,
+ can_buy:boolean,
+ city:string,
+ description:string,
+ email:string,
+ lat:number,
+ lon:number,
+ phones: {
+ id:number,
+ name:string,
+ number: string
+ }[],
+ place?:any,
+ polymorphic_ctype:number,
+ priority: boolean,
+ region: string,
+ rooms:{
+ amenities:string[],
+ description:string,
+ images: {
+ source:{
+ id:string
+ }
+ }[],
+ integration_id:string,
+ name:string,
+ rate_plans:{
+ description:string,
+ integration_id:string,
+ name:string
+ }[]
+ }[],
+ sort:number,
+ source: any,
+ stars:number,
+ title: string
+}
+
+export const HotelCard:React.FC
+ {
+ opened?
+
+ );
+}
\ No newline at end of file
diff --git a/src/elements/HotelCard/style.css b/src/elements/HotelCard/style.css
new file mode 100644
index 0000000..7c5caf1
--- /dev/null
+++ b/src/elements/HotelCard/style.css
@@ -0,0 +1,93 @@
+.hotelCard{
+ width: 250px;
+ padding: 0px 15px 15px 15px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background: #F5F5F5;
+ border-radius: 20px;
+ height: 380px;
+
+}
+h3{
+ margin: 0px;
+}
+
+.likeHotelBtn{
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+}
+
+.likeHotelBtn:hover{
+ opacity: 0.5;
+}
+
+.ratingTile{
+ width: 40px;
+ height: 40px;
+ background: #007470;
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 18px;
+ color:white;
+ font-weight: 500;
+}
+
+.hotelCardTools{
+ position: relative;
+ top:15px;
+ display: flex;
+ flex-direction: row;
+ width: 250px;
+ justify-content: space-between;
+}
+
+.hotelCardRow{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ gap:15px;
+ font-size: 12px;
+}
+
+.hotelBtn{
+ margin-top: 15px;
+}
+
+.openHotelCardBG{
+ position: fixed;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(0,0,0, 0.2);
+ left: 0px;
+ top:0px;
+ width: 100%;
+ height: 100vh;
+ z-index: 10000;
+
+}
+
+
+.openHotelCard{
+ width: 75%;
+ height: 75vh;
+ overflow-y: scroll;
+ padding: 50px;
+ background-color: white;
+ z-index: 10000;
+ border-radius: 20px;
+}
+
+
+.hotelImg{
+ margin-top: -65px;
+ margin-left: -15px;
+ width: 280px;
+ height: 240px;
+}
\ No newline at end of file
diff --git a/src/elements/Prefernces/index.tsx b/src/elements/Prefernces/index.tsx
new file mode 100644
index 0000000..cb77894
--- /dev/null
+++ b/src/elements/Prefernces/index.tsx
@@ -0,0 +1,327 @@
+import React, { useEffect, useState } from "react";
+import { Carousel, Tabs } from 'antd';
+import type { TabsProps } from 'antd';
+import { Button } from "../Button";
+import './style.css'
+import { ChoiceIcon, ChoiceIconIE } from "../ChoiceIcon";
+import { syncBuiltinESMExports } from "module";
+import axios from "axios";
+import { backend } from "../../consts";
+import { HotelCard, HotelCardIE } from "../HotelCard";
+import { AttractionCard, AttractionCardIE } from "../AttractionCard";
+export const Prefernces = () =>{
+ const [activeTab, setActiveTab] = useState(1)
+ const [cities, setCities] = useState([])
+ const [regions, setRegions] = useState([])
+ const [hotels, setHotels] = useState([])
+ const [events, setEvents] = useState([])
+
+ useEffect(()=>{
+ if (cities.length == 0){
+ backend.get('/data/cities').then((response)=>setCities(response.data))
+ backend.get('/data/regions').then((response)=>setRegions(response.data))
+ }
+
+ })
+
+
+ const transportOptions = {
+ options:[
+ {
+ name: 'Автобус',
+ icon: 'icons/bus.svg',
+ key: 'bus'
+ },
+ {
+ name: 'Машина',
+ icon: 'icons/car.svg',
+ key: 'car'
+ },
+ {
+ name: 'Самолет',
+ icon: 'icons/plane.svg',
+ key: 'plane'
+ },
+ {
+ name: 'Поезд',
+ icon: 'icons/train.svg',
+ key: 'train'
+ }
+ ],
+ onChange: (e)=>console.log(e)
+ } as ChoiceIconIE
+
+
+ const transportCityOptions = {
+ options:[
+ {
+ name: 'Транспорт',
+ icon: 'icons/bus.svg',
+ key: 'bus'
+ },
+ {
+ name: 'Машина',
+ icon: 'icons/car.svg',
+ key: 'car'
+ },
+ {
+ name: 'Велосипед',
+ icon: 'icons/bycicle.svg',
+ key: 'bycicle'
+ },
+ {
+ name: 'Самокат',
+ icon: 'icons/scooter.svg',
+ key: 'scooter'
+ },
+ {
+ name: 'Пешком',
+ icon: 'icons/walk.svg',
+ key: 'walk'
+ }
+ ],
+ onChange: (e)=>console.log(e)
+ } as ChoiceIconIE
+
+ const hotelOptions = {
+ options:[
+ {
+ name: 'Отель',
+ icon: 'icons/hotel.svg',
+ key: 'hotel'
+ },
+ {
+ name: 'Хостел',
+ icon: 'icons/hostel.svg',
+ key: 'hostel'
+ },
+ {
+ name: 'Апартаменты',
+ icon: 'icons/apart.svg',
+ key: 'apart'
+ },
+ ],
+ onChange: (e)=>console.log(e)
+ } as ChoiceIconIE
+
+
+
+ const ratingOptions = {
+ options:[
+ {
+ name: '1',
+ icon: 'icons/stars/1.svg',
+ key: '1'
+ },
+ {
+ name: '2',
+ icon: 'icons/stars/2.svg',
+ key: '2'
+ },
+ {
+ name: '3',
+ icon: 'icons/stars/3.svg',
+ key: '3'
+ },
+ {
+ name: '4',
+ icon: 'icons/stars/4.svg',
+ key: '4'
+ },
+ {
+ name: '5',
+ icon: 'icons/stars/5.svg',
+ key: '5'
+ },
+ ],
+ onChange: (e)=>backend.post('/onboarding/hotels/', {
+ stars: e.map((value)=>Number(value))
+ }).then((response)=>setHotels(response.data.hotels))
+ } as ChoiceIconIE
+
+
+ const eatOptions = {
+ options:[
+ {
+ name: 'Кафе',
+ icon: 'icons/cafe.svg',
+ key: 'cafe'
+ },
+ {
+ name: 'Ресторан',
+ icon: 'icons/rest.svg',
+ key: 'rest'
+ },
+ {
+ name: 'Бар',
+ icon: 'icons/bar.svg',
+ key: 'bar'
+ },
+ ],
+ onChange: (e)=>console.log(e)
+ } as ChoiceIconIE
+
+ const eatRatingOptions = {
+ options:[
+ {
+ name: '1',
+ icon: 'icons/stars/1.svg',
+ key: '1'
+ },
+ {
+ name: '2',
+ icon: 'icons/stars/2.svg',
+ key: '2'
+ },
+ {
+ name: '3',
+ icon: 'icons/stars/3.svg',
+ key: '3'
+ },
+ {
+ name: '4',
+ icon: 'icons/stars/4.svg',
+ key: '4'
+ },
+ {
+ name: '5',
+ icon: 'icons/stars/5.svg',
+ key: '5'
+ },
+ ],
+ onChange: (e)=>console.log(e)
+ } as ChoiceIconIE
+
+ const attractionOptions = {
+ options:[
+ {
+ name: 'Park',
+ icon: 'icons/park.png',
+ key: 'park'
+ },
+ {
+ name: 'Monument',
+ icon: 'icons/monument.png',
+ key: 'monument'
+ },
+ {
+ name: 'Museum',
+ icon: 'icons/museum.png',
+ key: 'museum'
+ },
+ {
+ name: 'Unesco',
+ icon: 'icons/unesco.png',
+ key: 'unesco'
+ },
+ {
+ name: 'Exhibition',
+ icon: 'icons/exhibition.png',
+ key: 'exhibition'
+ },
+ ],
+ onChange: (e)=>backend.post('/onboarding/event/', {
+ stars: e.map((value)=>Number(value))
+ }).then((response)=>setEvents(response.data.events))
+
+ } as ChoiceIconIE
+
+
+
+
+
+
+
+
+ const items: TabsProps['items'] = [
+ {
+ key: '1',
+ label: `Транспорт`,
+ children:
+
+
:null
+ }
+
+
+ {props.title}
+
+
+ {props.address}
+
+ {props.phones.map((phone)=>
+ {phone.name} {phone.number}
)}
+
+ {props.rooms.map((room)=>
+
+
+
+ )}
+ {room.name}
+{room.description}
+
+
+
+
+ ![]()
setLiked(!liked)} src={liked? 'icons/liked.svg':'icons/unliked.svg'}>
+
+
+ {props.stars}*
+
+ {props.title}
+
+
+
+ {props.address}
+ {
+ props.rooms == null? null:{props.rooms.length} видов номеров
+
+ }
+
+
+ ,
+ },
+ {
+ key: '2',
+ label: `Проживание`,
+ children:
+
+ Как вы предпочитаете добираться
+
+
+ Как вы предпочитаете передвигаться на месте
+
+
,
+ },
+ {
+ key: '3',
+ label: `Питание`,
+ children:
+
+ Где вы предпочитаете остановится
+
+
+ Рейтинг
+
+
+ Выберите понравившеися вам отели
+
+ {
+ hotels.map((hotel:HotelCardIE)=>
+
+
+ },
+ {
+ key: '4',
+ label: `Развлечения`,
+ children:
+
+ Где вы предпочитаете есть
+
+
+ Рейтинг
+
+
,
+ },
+ ];
+
+
+
+
+ return(
+
+
+ Что вы хотите увидеть
+
+
+ Выберите самое интересное
+
+ {
+ events.map((event:AttractionCardIE)=>{
+ return
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/elements/Prefernces/style.css b/src/elements/Prefernces/style.css
new file mode 100644
index 0000000..8def387
--- /dev/null
+++ b/src/elements/Prefernces/style.css
@@ -0,0 +1,38 @@
+.prefs{
+ width: 60%;
+ position: fixed;
+ top:0px;
+ right:0px;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ padding: 25px;
+ background-color: white;
+}
+
+.prefsHeadWrapper{
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.prefsbg{
+ width: 100%;
+ height: 100vh;
+ background-color: rgba(0,0,0,0.2);
+}
+
+.hotelsCardWrapper{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap:30px;
+ height: 400px;
+ justify-content: center;
+ align-items: center;
+ overflow-y: scroll;
+ margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
index f982d32..e1f7d95 100644
--- a/src/pages/Main/index.tsx
+++ b/src/pages/Main/index.tsx
@@ -1,5 +1,6 @@
-import { AutoComplete, DatePicker, Input, Checkbox } from 'antd';
-import react, { useState } from 'react'
+import { AutoComplete, DatePicker, Input, Checkbox, Select } from 'antd';
+import react, { useEffect, useState } from 'react'
+import { backend } from '../../consts';
import { Button } from '../../elements/Button';
import { FavoriteCard, FavoriteCardIE } from '../../elements/FavoriteCard';
import { GenerateCard } from '../../elements/GenerateCard';
@@ -9,6 +10,14 @@ import './style.css'
export const Main: react.FC = () => {
const { RangePicker } = DatePicker;
+ const [cities, setCities] = useState([])
+
+ useEffect(()=>{
+ if (cities.length == 0){
+ backend.get('/data/cities').then((response)=>setCities(response.data))
+ }
+ })
+
const TourPropsCard = {
name: 'Я покажу тебе Москву',
@@ -77,9 +86,25 @@ export const Main: react.FC = () => {
+ setActiveTab(Number(e))} />
+
+
+
+
+ Мои предпочтения
+Отметьте свои предпочтения, чтобы мы смогли предоставить лучшие рекомендации туров
+ Фильтры
-