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 { IonReactRouter } from "@ionic/react-router";
import { import {
bookmarkOutline, bookmarkOutline,
bookSharp,
cafeOutline, cafeOutline,
cafeSharp,
calendar,
ellipse,
mailOpenSharp,
map,
mapOutline, mapOutline,
menu, menu,
pencil,
square,
triangle,
wallet,
walletOutline walletOutline
} from "ionicons/icons"; } from "ionicons/icons";
import Place from "./pages/Place"; import Place from "./pages/Place";
@ -31,6 +21,7 @@ import Education from "./pages/Education";
import Tab3 from "./pages/Tab3"; import Tab3 from "./pages/Tab3";
import Menu from "./pages/Menu"; import Menu from "./pages/Menu";
import Works from "./pages/Works"; import Works from "./pages/Works";
import Space from "./pages/Space";
import "@ionic/react/css/core.css"; import "@ionic/react/css/core.css";
@ -53,18 +44,22 @@ const App: React.FC = () => (
<IonReactRouter> <IonReactRouter>
<IonTabs> <IonTabs>
<IonRouterOutlet> <IonRouterOutlet>
<Route exact path="/tab1"> <Route exact path="/">
<Redirect to="/places" />
</Route>
<Route exact path="/places">
<Place /> <Place />
</Route> </Route>
<Route exact path="/edu"> <Route exact path="/edu">
<Education /> <Education />
</Route> </Route>
<Route exact path="/space">
<Space />
</Route>
<Route path="/tab3"> <Route path="/tab3">
<Tab3 /> <Tab3 />
</Route> </Route>
<Route exact path="/">
<Redirect to="/tab1" />
</Route>
<Route path="/menu3"> <Route path="/menu3">
<Menu /> <Menu />
</Route> </Route>
@ -74,7 +69,7 @@ const App: React.FC = () => (
</IonRouterOutlet> </IonRouterOutlet>
<IonTabBar slot="bottom"> <IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1"> <IonTabButton tab="places" href="/places">
<IonIcon icon={mapOutline} /> <IonIcon icon={mapOutline} />
<IonLabel>Места</IonLabel> <IonLabel>Места</IonLabel>
</IonTabButton> </IonTabButton>
@ -96,7 +91,7 @@ const App: React.FC = () => (
</IonTabButton>*/} </IonTabButton>*/}
<IonTabButton tab="menu" href="/menu"> <IonTabButton tab="menu" href="/menu">
<IonIcon icon={menu} /> <IonIcon icon={menu} />
<IonLabel>Меню</IonLabel> <IonLabel>Ещё</IonLabel>
</IonTabButton> </IonTabButton>
</IonTabBar> </IonTabBar>
</IonTabs> </IonTabs>

40
src/pages/Education.tsx
Unescape View File

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

90
src/pages/Place.tsx
Unescape View File

@ -9,10 +9,13 @@ import {
IonCardTitle, IonCardTitle,
IonCardContent, IonCardContent,
IonImg, IonImg,
IonIcon,
IonCardSubtitle, IonCardSubtitle,
IonButton, IonButton
IonNav
} from "@ionic/react"; } from "@ionic/react";
import { navigateOutline } from "ionicons/icons";
import ExploreContainer from "../components/ExploreContainer"; import ExploreContainer from "../components/ExploreContainer";
import "./Tab1.css"; import "./Tab1.css";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
@ -25,28 +28,54 @@ const Tab1: React.FC = () => {
{ {
name: "Мурманск", name: "Мурманск",
description: description:
"город на северо-западе России, административный центр Мурманской области", "Город на северо-западе России, административный центр Мурманской области",
img: "" image:
"https://travelsoul.ru/wp-content/uploads/a/3/4/a34b7266b82357999628736e466e7e77.jpeg",
distance: "0км, Вы на месте",
key: genKey()
}, },
{ {
name: "Кировск", name: "Кировск",
description: description:
"Ки́ровск (в 1931-1934 годах — Хибиного́рск) — город в Мурманской области России, у горного массива Кукисвумчорр.Что посетить: поход в горы Хибины/сап летом и горные лыжи/сноуборд в Кировске зимой. Как добраться: Рейсовые автобусы и личный автотранспорт", "Ки́ровск (в 1931-1934 годах — Хибиного́рск) — город в Мурманской области России, у горного массива Кукисвумчорр.Что посетить: поход в горы Хибины/сап летом и горные лыжи/сноуборд в Кировске зимой. Как добраться: Рейсовые автобусы и личный автотранспорт",
key: genKey image:
"https://gulaytour.ru/wp-content/uploads/2018/03/4636210-1024x682.jpg",
distance:
"Расстояние от Кировска до Мурманска – 214 километров по трассе",
key: genKey()
}, },
{ {
name: "Териберка", name: "Териберка",
description: description:
"Тери́берка — село в Кольском районе Мурманской области. Расположено на Мурманском берегу Кольского полуострова в устье одноимённой реки, при впадении её в губу Териберскую Баренцева моря. Что посетить: Левиафан, кладбище кораблей, охота на китов, Северно-ледовитый океан, пляж драконьих яиц, норвежские пейзажи, батарейский водопад. Как добраться: Рейсовые автобусы и личный автотранспорт", "Тери́берка — село в Кольском районе Мурманской области. Расположено на Мурманском берегу Кольского полуострова в устье одноимённой реки, при впадении её в губу Териберскую Баренцева моря. Что посетить: Левиафан, кладбище кораблей, охота на китов, Северно-ледовитый океан, пляж драконьих яиц, норвежские пейзажи, батарейский водопад. Как добраться: Рейсовые автобусы и личный автотранспорт",
key: genKey distance: "Расстояние от Мурманска до Териберки 130 километров",
image:
"https://static.tildacdn.com/tild6162-3932-4634-b938-353736373963/156356462917696187.jpg",
key: genKey()
}, },
{ {
name: "Кировск", name: "Кировск",
description: description:
"Ки́ровск (в 1931-1934 годах — Хибиного́рск) — город в Мурманской области России, у горного массива Кукисвумчорр.Что посетить: поход в горы Хибины/сап летом и горные лыжи/сноуборд в Кировске зимой. Как добраться: Рейсовые автобусы и личный автотранспорт", "Ки́ровск (в 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 ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
@ -60,28 +89,43 @@ const Tab1: React.FC = () => {
<IonTitle size="large">Tab 1</IonTitle> <IonTitle size="large">Tab 1</IonTitle>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonNav> {cites.map((c) => (
{cites.map((c) => ( <IonCard>
<IonCard onClick={() => alert(c.name)}> <IonCardHeader>
<IonCardHeader> <IonImg
<IonImg src={""} /> src={c.image}
<IonCardTitle>{c.name}</IonCardTitle> style={{ width: "100%", height: "150px" }}
</IonCardHeader> />
<IonCardTitle>{c.name}</IonCardTitle>
</IonCardHeader>
<IonCardContent>
{c.description}
<IonCardContent> <p
{c.description} style={{
{/*<p style={{ textAlign: "center" }}> 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 <IonButton
color="lifght" color="lifght"
style={{ backgroundColor: "#03F", color: "#EEE" }} style={{ backgroundColor: "#EE5203", color: "#EEE" }}
> >
Хочу подробностей Хочу подробностей
</IonButton>{" "} </IonButton>{" "}
</p> */} </p>
</IonCardContent> </IonCardContent>
</IonCard> </IonCard>
))} ))}
</IonNav>
</IonContent> </IonContent>
</IonPage> </IonPage>
); );

20
src/pages/Space.tsx
Unescape View File

@ -8,10 +8,14 @@ import {
IonLabel, IonLabel,
IonSegmentButton IonSegmentButton
} from "@ionic/react"; } from "@ionic/react";
import { tabletPortraitSharp } from "ionicons/icons";
import "./Tab2.css";
const Tab2: React.FC = () => { const Tab2: React.FC = () => {
const tabApp = [
{ title: "Молодёжные пространства", value: "YangSpaces" },
{ title: "Еда", value: "Food" },
{ title: "Кофейни", value: "Cafe" }
];
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
@ -23,13 +27,13 @@ const Tab2: React.FC = () => {
<IonHeader collapse="condense"></IonHeader> <IonHeader collapse="condense"></IonHeader>
<IonSegment <IonSegment
onIonChange={(e) => console.log("Segment selected", e.detail.value)} onIonChange={(e) => console.log("Segment selected", e.detail.value)}
style={{ fontSize: 8, padding: 5 }}
> >
<IonSegmentButton value="Instututs"> {tabApp.map((i) => (
<IonLabel>Институты/Клолледжи</IonLabel> <IonSegmentButton value={i.value} style={{ fontSize: "12px" }}>
</IonSegmentButton> <IonLabel>{i.title}</IonLabel>
<IonSegmentButton value="Grands"> </IonSegmentButton>
<IonLabel>Грантовая поддержка</IonLabel> ))}
</IonSegmentButton>
</IonSegment> </IonSegment>
</IonContent> </IonContent>
</IonPage> </IonPage>

26
src/pages/Works.tsx
Unescape View File

@ -11,6 +11,21 @@ import {
import "./Tab2.css"; import "./Tab2.css";
const Tab2: React.FC = () => { const Tab2: React.FC = () => {
const tablist = [
{
title: "Работа с опытом",
value: "Instituts",
handler: () => EduView
},
{
title: "Работа без опыта/стажировка",
value: "Grands",
handler: () => GrandsView()
}
];
const WorkList = [{ title: "", price: "", likes: "", experience: "" }, {}];
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader>
@ -23,12 +38,11 @@ const Tab2: React.FC = () => {
<IonSegment <IonSegment
onIonChange={(e) => console.log("Segment selected", e.detail.value)} onIonChange={(e) => console.log("Segment selected", e.detail.value)}
> >
<IonSegmentButton value="Instututs"> {tablist.map((i) => (
<IonLabel>Работа с опытом</IonLabel> <IonSegmentButton value={i.value} style={{ fontSize: "12px" }}>
</IonSegmentButton> <IonLabel>{i.title}</IonLabel>
<IonSegmentButton value="Grands"> </IonSegmentButton>
<IonLabel>Работа без опыта/стажировка</IonLabel> ))}
</IonSegmentButton>
</IonSegment> </IonSegment>
</IonContent> </IonContent>
</IonPage> </IonPage>

Write Preview
Loading…
Cancel
Save