From 68950cc0cbac5b4913d76c62aded794be715b541 Mon Sep 17 00:00:00 2001 From: serkus01 <7erkus@gmail.com> Date: Fri, 15 Jul 2022 15:45:57 +0900 Subject: [PATCH] my second commit --- .codesandbox/workspace.json | 20 +++++++++ src/App.tsx | 27 +++++------ src/pages/Education.tsx | 40 ++++++++++++----- src/pages/Place.tsx | 90 +++++++++++++++++++++++++++---------- src/pages/Space.tsx | 20 +++++---- src/pages/Works.tsx | 26 ++++++++--- 6 files changed, 158 insertions(+), 65 deletions(-) create mode 100644 .codesandbox/workspace.json diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json new file mode 100644 index 0000000..7b46a7e --- /dev/null +++ b/.codesandbox/workspace.json @@ -0,0 +1,20 @@ +{ + "responsive-preview": { + "Mobile": [ + 320, + 675 + ], + "Tablet": [ + 1024, + 765 + ], + "Desktop": [ + 1400, + 800 + ], + "Desktop HD": [ + 1920, + 1080 + ] + } +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 04e3d0e..dd21c6f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,19 +11,9 @@ import { import { IonReactRouter } from "@ionic/react-router"; import { bookmarkOutline, - bookSharp, cafeOutline, - cafeSharp, - calendar, - ellipse, - mailOpenSharp, - map, mapOutline, menu, - pencil, - square, - triangle, - wallet, walletOutline } from "ionicons/icons"; import Place from "./pages/Place"; @@ -31,6 +21,7 @@ import Education from "./pages/Education"; import Tab3 from "./pages/Tab3"; import Menu from "./pages/Menu"; import Works from "./pages/Works"; +import Space from "./pages/Space"; import "@ionic/react/css/core.css"; @@ -53,18 +44,22 @@ const App: React.FC = () => ( - + + + + + + + - - - + @@ -74,7 +69,7 @@ const App: React.FC = () => ( - + Места @@ -96,7 +91,7 @@ const App: React.FC = () => ( */} - Меню + Ещё diff --git a/src/pages/Education.tsx b/src/pages/Education.tsx index b026931..ac99d8d 100644 --- a/src/pages/Education.tsx +++ b/src/pages/Education.tsx @@ -20,7 +20,8 @@ import ExploreContainer from "../components/ExploreContainer"; import EduCard from "../components/CardEdu"; const Tab2: React.FC = () => { - const [eduState, setEduState] = useState(0); + //const [eduState, setEduState] = useState([ + //]); const EduLIst = [ { @@ -40,11 +41,14 @@ const Tab2: React.FC = () => { description: "", logo: "https://mpc-murmansk.ru/img/all/186_mpk_logo.jpg" }, + { + /* name: "", description: "", logo: "" }, { name: "", description: "", logo: "" }, { name: "", description: "", logo: "" }, - { name: "", description: "", logo: "" }, - { name: "", description: "", logo: "" } + { name: "", description: "", logo: "" } */ + } ]; + const EduView = () => EduLIst.map((edu) => ( @@ -67,7 +71,7 @@ const Tab2: React.FC = () => {

Хочу подробностей {" "} @@ -81,6 +85,19 @@ const Tab2: React.FC = () => { ); + const tablist = [ + { + title: "Институты/Клолледжи", + value: "Instituts", + handler: EduView + }, + { + title: "Грантовая поддержка", + value: "Grands", + handler: GrandsView + } + ]; + return ( @@ -91,15 +108,14 @@ const Tab2: React.FC = () => { console.log("Segment selected", e.detail.value)} + style={{ fontSize: "8px", color: "#00F" }} + onIonChange={(e) => e.detail.value} > - - Институты/Клолледжи - - - Грантовая поддержка - + {tablist.map((i) => ( + + {i.title} + + ))} {EduView()} diff --git a/src/pages/Place.tsx b/src/pages/Place.tsx index 90b7009..a0ce604 100644 --- a/src/pages/Place.tsx +++ b/src/pages/Place.tsx @@ -9,10 +9,13 @@ import { IonCardTitle, IonCardContent, IonImg, + IonIcon, IonCardSubtitle, - IonButton, - IonNav + IonButton } from "@ionic/react"; + +import { navigateOutline } from "ionicons/icons"; + import ExploreContainer from "../components/ExploreContainer"; import "./Tab1.css"; import { Link } from "react-router-dom"; @@ -25,28 +28,54 @@ const Tab1: React.FC = () => { { name: "Мурманск", description: - "город на северо-западе России, административный центр Мурманской области", - img: "" + "Город на северо-западе России, административный центр Мурманской области", + image: + "https://travelsoul.ru/wp-content/uploads/a/3/4/a34b7266b82357999628736e466e7e77.jpeg", + distance: "0км, Вы на месте", + key: genKey() }, { name: "Кировск", description: "Ки́ровск (в 1931-1934 годах — Хибиного́рск) — город в Мурманской области России, у горного массива Кукисвумчорр.Что посетить: поход в горы Хибины/сап летом и горные лыжи/сноуборд в Кировске зимой. Как добраться: Рейсовые автобусы и личный автотранспорт", - key: genKey + image: + "https://gulaytour.ru/wp-content/uploads/2018/03/4636210-1024x682.jpg", + distance: + "Расстояние от Кировска до Мурманска – 214 километров по трассе", + key: genKey() }, { name: "Териберка", description: "Тери́берка — село в Кольском районе Мурманской области. Расположено на Мурманском берегу Кольского полуострова в устье одноимённой реки, при впадении её в губу Териберскую Баренцева моря. Что посетить: Левиафан, кладбище кораблей, охота на китов, Северно-ледовитый океан, пляж драконьих яиц, норвежские пейзажи, батарейский водопад. Как добраться: Рейсовые автобусы и личный автотранспорт", - key: genKey + distance: "Расстояние от Мурманска до Териберки 130 километров", + image: + "https://static.tildacdn.com/tild6162-3932-4634-b938-353736373963/156356462917696187.jpg", + key: genKey() }, { name: "Кировск", description: "Ки́ровск (в 1931-1934 годах — Хибиного́рск) — город в Мурманской области России, у горного массива Кукисвумчорр.Что посетить: поход в горы Хибины/сап летом и горные лыжи/сноуборд в Кировске зимой. Как добраться: Рейсовые автобусы и личный автотранспорт", - key: genKey + image: + "https://avatars.mds.yandex.net/get-zen_doc/3429702/pub_624c4eea5b725700b4dce688_624c4f3062661e7fd361f496/scale_1200", + key: genKey() } ]; + + /* + const url = "https://api.molodaya-arctica.ru/api/cities" + const response = fetch(url, { + 'method': 'GET', + 'headers': { + 'Content-Type': "application/json;charset=utf-8", + 'Accept': "application/json", + 'Authorization': + "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiNjA3NDBhZDBkYTI3YjM0NGM5ZDBhNGZiNTNhNzdmNzU5MjY2YzgyZTQ0MzJlNmE3OTE2M2ZkZjRjN2YxNzc0Y2Y0MWY1NTIxNWZkMTIyNTIiLCJpYXQiOjE2NTYzMjA2NjEuNzg3NjgzLCJuYmYiOjE2NTYzMjA2NjEuNzg3Njg0LCJleHAiOjE2ODc4NTY2NjEuNzg0OTQ2LCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.h6t8LsDT1DbsRhUUL7tBds3NIezTaZQKRxlbfJ96sTIZf6OWq3hNl8pDGuM7zovIua57ylPufskgu7avX6X4ZBrf2eWE8Y-ch2mAg9LDR8lEYLhs9H9DS4S1JFmQvBU-LQkJfnytlhTgeilJ4Stw0GdSO40TQg-VuDWW5R5tSb18sEfa0kLyM2GlcDYgRRWjJxUsBl9Oxz5UJiKvW_banCFtJS6Bmzuz-GseBKOw7SqHR3PwxwX1QvO5vRMfMMoVJhPIJ5fwNYpDjICxJoAG4dG7h8DZbSSjb_CitcvuXKVmZvdlOxkuBUv0FvkwkuMvhfIGnKWomEypmbBiUniOZBlvrcxzQPkVkzqgiJPgKtS3_8U4KRbdY0Is7PhxluO6PR7eF5V81otTlAO4CmC4VB3Ne1gp9jnE0EbF9Da-c8kjBq1roqkLWIWEgOovOR-56CbSFth6c6QR0MeV6Q_54SFB5ltWw88Y5ZnqHjHg-ePVd4fY61aII3l8SKXwuJDGeFoXX-772Sl3bnk5gLx8kgpwrbBplOS0CkkJdClFoahEzPsXu32WJHjqMy6KACIj7coP5d8EprgeGe266-ZBS6kkgVuFLOqQQhaz5ekXtisiMRvIkiNC3taIYwQH2Vi7vsvr3hr-oTgnMSFnXDgHnwVZNqDk825vu6Yw-5MAlLM'" + } + }); + let result = response.json() +*/ return ( @@ -60,28 +89,43 @@ const Tab1: React.FC = () => { Tab 1 - - {cites.map((c) => ( - alert(c.name)}> - - - {c.name} - + {cites.map((c) => ( + + + + {c.name} + + + + {c.description} - - {c.description} - {/*

+

+ + {c.distance} +

+

Хочу подробностей {" "} -

*/} - - - ))} - +

+ + + ))} ); diff --git a/src/pages/Space.tsx b/src/pages/Space.tsx index 9b0332e..2f5860f 100644 --- a/src/pages/Space.tsx +++ b/src/pages/Space.tsx @@ -8,10 +8,14 @@ import { IonLabel, IonSegmentButton } from "@ionic/react"; - -import "./Tab2.css"; +import { tabletPortraitSharp } from "ionicons/icons"; const Tab2: React.FC = () => { + const tabApp = [ + { title: "Молодёжные пространства", value: "YangSpaces" }, + { title: "Еда", value: "Food" }, + { title: "Кофейни", value: "Cafe" } + ]; return ( @@ -23,13 +27,13 @@ const Tab2: React.FC = () => { console.log("Segment selected", e.detail.value)} + style={{ fontSize: 8, padding: 5 }} > - - Институты/Клолледжи - - - Грантовая поддержка - + {tabApp.map((i) => ( + + {i.title} + + ))} diff --git a/src/pages/Works.tsx b/src/pages/Works.tsx index 597602d..b68f71d 100644 --- a/src/pages/Works.tsx +++ b/src/pages/Works.tsx @@ -11,6 +11,21 @@ import { import "./Tab2.css"; const Tab2: React.FC = () => { + const tablist = [ + { + title: "Работа с опытом", + value: "Instituts", + handler: () => EduView + }, + { + title: "Работа без опыта/стажировка", + value: "Grands", + handler: () => GrandsView() + } + ]; + + const WorkList = [{ title: "", price: "", likes: "", experience: "" }, {}]; + return ( @@ -23,12 +38,11 @@ const Tab2: React.FC = () => { console.log("Segment selected", e.detail.value)} > - - Работа с опытом - - - Работа без опыта/стажировка - + {tablist.map((i) => ( + + {i.title} + + ))}