serkus
/
Arctic_Yang_Polar_Bears
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

my second commit

Browse Source
master
serkus01 2 years ago
parent 4c57ac7100
commit 68950cc0cb
6 changed files with 158 additions and 65 deletions
Show Stats Download Patch File Download Diff File

20
.codesandbox/workspace.json
Unescape View File

@ -0,0 +1,20 @@
{
"responsive-preview": {
"Mobile": [
320,
675
],
"Tablet": [
1024,
765
],
"Desktop": [
1400,
800
],
"Desktop HD": [
1920,
1080
]
}
}

27
src/App.tsx
Unescape View File

@ -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 = () => (
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route exact path="/tab1">
<Route exact path="/">
<Redirect to="/places" />
</Route>
<Route exact path="/places">
<Place />
</Route>
<Route exact path="/edu">
<Education />
</Route>
<Route exact path="/space">
<Space />
</Route>
<Route path="/tab3">
<Tab3 />
</Route>
<Route exact path="/">
<Redirect to="/tab1" />
</Route>
<Route path="/menu3">
<Menu />
</Route>
@ -74,7 +69,7 @@ const App: React.FC = () => (
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1">
<IonTabButton tab="places" href="/places">
<IonIcon icon={mapOutline} />
<IonLabel>Места</IonLabel>
</IonTabButton>
@ -96,7 +91,7 @@ const App: React.FC = () => (
</IonTabButton>*/}
<IonTabButton tab="menu" href="/menu">
<IonIcon icon={menu} />
<IonLabel>Меню</IonLabel>
<IonLabel>Ещё</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>

40
src/pages/Education.tsx
Unescape View File

@ -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) => (
<IonCard>
@ -67,7 +71,7 @@ const Tab2: React.FC = () => {
<p style={{ textAlign: "center" }}>
<IonButton
color="lifght"
style={{ backgroundColor: "#03F", color: "#EEE" }}
style={{ backgroundColor: "#EE5203", color: "#EEE" }}
>
Хочу подробностей
</IonButton>{" "}
@ -81,6 +85,19 @@ const Tab2: React.FC = () => {
<a href="https://rscf.ru/contests/?ysclid=l5l3m8z1ja498967331"></a>
</>
);
const tablist = [
{
title: "Институты/Клолледжи",
value: "Instituts",
handler: EduView
},
{
title: "Грантовая поддержка",
value: "Grands",
handler: GrandsView
}
];
return (
<IonPage>
<IonHeader>
@ -91,15 +108,14 @@ const Tab2: React.FC = () => {
<IonContent fullscreen>
<IonHeader collapse="condense"></IonHeader>
<IonSegment
style={{ fontSize: "12px", color: "#00F" }}
onIonChange={(e) => console.log("Segment selected", e.detail.value)}
style={{ fontSize: "8px", color: "#00F" }}
onIonChange={(e) => e.detail.value}
>
<IonSegmentButton value="Instututs">
<IonLabel>Институты/Клолледжи</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="Grands">
<IonLabel>Грантовая поддержка</IonLabel>
</IonSegmentButton>
{tablist.map((i) => (
<IonSegmentButton value={i.handler} style={{ fontSize: "12px" }}>
<IonLabel>{i.title}</IonLabel>
</IonSegmentButton>
))}
</IonSegment>
<IonContent>{EduView()}</IonContent>
</IonContent>

90
src/pages/Place.tsx
Unescape View File

@ -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 (
<IonPage>
<IonHeader>
@ -60,28 +89,43 @@ const Tab1: React.FC = () => {
<IonTitle size="large">Tab 1</IonTitle>
</IonToolbar>
</IonHeader>
<IonNav>
{cites.map((c) => (
<IonCard onClick={() => alert(c.name)}>
<IonCardHeader>
<IonImg src={""} />
<IonCardTitle>{c.name}</IonCardTitle>
</IonCardHeader>
{cites.map((c) => (
<IonCard>
<IonCardHeader>
<IonImg
src={c.image}
style={{ width: "100%", height: "150px" }}
/>
<IonCardTitle>{c.name}</IonCardTitle>
</IonCardHeader>
<IonCardContent>
{c.description}
<IonCardContent>
{c.description}
{/*<p style={{ textAlign: "center" }}>
<p
style={{
padding: "10px",
border: "1px dotted #AAA",
fontSize: "16px"
}}
>
<IonIcon
icon={navigateOutline}
style={{ padding: "5px", fontSize: "20px" }}
/>
<b>{c.distance}</b>
</p>
<p style={{ textAlign: "center" }}>
<IonButton
color="lifght"
style={{ backgroundColor: "#03F", color: "#EEE" }}
style={{ backgroundColor: "#EE5203", color: "#EEE" }}
>
Хочу подробностей
</IonButton>{" "}
</p> */}
</IonCardContent>
</IonCard>
))}
</IonNav>
</p>
</IonCardContent>
</IonCard>
))}
</IonContent>
</IonPage>
);

20
src/pages/Space.tsx
Unescape View File

@ -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 (
<IonPage>
<IonHeader>
@ -23,13 +27,13 @@ const Tab2: React.FC = () => {
<IonHeader collapse="condense"></IonHeader>
<IonSegment
onIonChange={(e) => console.log("Segment selected", e.detail.value)}
style={{ fontSize: 8, padding: 5 }}
>
<IonSegmentButton value="Instututs">
<IonLabel>Институты/Клолледжи</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="Grands">
<IonLabel>Грантовая поддержка</IonLabel>
</IonSegmentButton>
{tabApp.map((i) => (
<IonSegmentButton value={i.value} style={{ fontSize: "12px" }}>
<IonLabel>{i.title}</IonLabel>
</IonSegmentButton>
))}
</IonSegment>
</IonContent>
</IonPage>

26
src/pages/Works.tsx
Unescape View File

@ -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 (
<IonPage>
<IonHeader>
@ -23,12 +38,11 @@ const Tab2: React.FC = () => {
<IonSegment
onIonChange={(e) => console.log("Segment selected", e.detail.value)}
>
<IonSegmentButton value="Instututs">
<IonLabel>Работа с опытом</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="Grands">
<IonLabel>Работа без опыта/стажировка</IonLabel>
</IonSegmentButton>
{tablist.map((i) => (
<IonSegmentButton value={i.value} style={{ fontSize: "12px" }}>
<IonLabel>{i.title}</IonLabel>
</IonSegmentButton>
))}
</IonSegment>
</IonContent>
</IonPage>

Write Preview
Loading…
Cancel
Save