Compare commits
1 Commits
develop/mo
...
5be77aae23
| Author | SHA1 | Date | |
|---|---|---|---|
|
5be77aae23 |
@@ -1,76 +0,0 @@
|
|||||||
import { IonButton, IonButtons, IonCol, IonContent, IonHeader, IonIcon, IonPage, IonRow, IonTitle, IonToolbar, useIonRouter } from '@ionic/react';
|
|
||||||
|
|
||||||
import { Geolocation } from '@capacitor/geolocation';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { SkeletonDashboard } from '../components/SkeletonDashboard';
|
|
||||||
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
|
||||||
import { CurrentWeather } from '../components/CurrentWeather';
|
|
||||||
|
|
||||||
function Tab1() {
|
|
||||||
const router = useIonRouter();
|
|
||||||
|
|
||||||
const [currentWeather, setCurrentWeather] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getCurrentPosition();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getCurrentPosition = async () => {
|
|
||||||
setCurrentWeather(false);
|
|
||||||
const coordinates = await Geolocation.getCurrentPosition();
|
|
||||||
getAddress(coordinates.coords);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getAddress = async (coords) => {
|
|
||||||
const query = `${coords.latitude},${coords.longitude}`;
|
|
||||||
const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${query}`);
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
console.log(data);
|
|
||||||
setCurrentWeather(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// const router = useIonRouter();
|
|
||||||
function handleBackClick() {
|
|
||||||
router.goBack();
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonHeader>
|
|
||||||
<IonToolbar>
|
|
||||||
<IonTitle>My Weather</IonTitle>
|
|
||||||
|
|
||||||
<IonButtons slot="end">
|
|
||||||
<IonButton onClick={() => getCurrentPosition()}>
|
|
||||||
<IonIcon icon={refreshOutline} color="primary" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
|
|
||||||
<IonButtons slot="start">
|
|
||||||
<IonButton onClick={() => handleBackClick()}>
|
|
||||||
<IonIcon icon={chevronBackOutline} color="primary" />
|
|
||||||
</IonButton>
|
|
||||||
</IonButtons>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
<IonContent fullscreen>
|
|
||||||
<IonHeader collapse="condense">
|
|
||||||
<IonToolbar>
|
|
||||||
<IonTitle size="large">Dashboard</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonRow className="ion-margin-start ion-margin-end ion-justify-content-center ion-text-center">
|
|
||||||
<IonCol size="12">
|
|
||||||
<h4>Here's your location based weather</h4>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
|
|
||||||
<div style={{ marginTop: '-1.5rem' }}>{currentWeather ? <CurrentWeather currentWeather={currentWeather} /> : <SkeletonDashboard />}</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Tab1;
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
|
||||||
|
|
||||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
|
||||||
import { Route, Redirect } from 'react-router';
|
|
||||||
|
|
||||||
import Tab1 from './AppPages/Tab1';
|
|
||||||
import Tab2 from './AppPages/Tab2';
|
|
||||||
|
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
function DemoWeatherApp() {
|
|
||||||
return (
|
|
||||||
<IonTabs>
|
|
||||||
<IonRouterOutlet>
|
|
||||||
<Route exact path="/demo-weather-app/tab1">
|
|
||||||
<Tab1 />
|
|
||||||
</Route>
|
|
||||||
<Route exact path="/demo-weather-app/tab2">
|
|
||||||
<Tab2 />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Redirect exact path="/demo-weather-app" to="/demo-weather-app/tab1" />
|
|
||||||
</IonRouterOutlet>
|
|
||||||
|
|
||||||
{/* */}
|
|
||||||
<IonTabBar slot="bottom">
|
|
||||||
<IonTabButton tab="tab1" href="/demo-weather-app/tab1">
|
|
||||||
<IonIcon icon={cloudOutline} />
|
|
||||||
<IonLabel>Dashboard</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="tab2" href="/demo-weather-app/tab2">
|
|
||||||
<IonIcon icon={searchOutline} />
|
|
||||||
<IonLabel>Search</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
</IonTabBar>
|
|
||||||
</IonTabs>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default DemoWeatherApp;
|
|
||||||
@@ -1,103 +0,0 @@
|
|||||||
#about-page {
|
|
||||||
ion-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
--background: transparent;
|
|
||||||
--color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
ion-toolbar ion-back-button,
|
|
||||||
ion-toolbar ion-button,
|
|
||||||
ion-toolbar ion-menu-button {
|
|
||||||
--color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
height: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .about-image {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
transition: opacity 500ms ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .madison {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/madison.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .austin {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/austin.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .chicago {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/chicago.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-header .seattle {
|
|
||||||
background-image: url('/assets/WeatherDemo/img/about/seattle.jpg');
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info {
|
|
||||||
position: relative;
|
|
||||||
margin-top: -10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: var(--ion-background-color, #fff);
|
|
||||||
z-index: 2; // display rounded border above header image
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info ion-list {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info p {
|
|
||||||
line-height: 130%;
|
|
||||||
|
|
||||||
color: var(--ion-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-info ion-icon {
|
|
||||||
margin-inline-end: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* iOS Only
|
|
||||||
*/
|
|
||||||
|
|
||||||
.ios .about-info {
|
|
||||||
--ion-padding: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ios .about-info h3 {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#date-input-popover {
|
|
||||||
--offset-y: -var(--ion-safe-area-bottom);
|
|
||||||
|
|
||||||
--max-width: 90%;
|
|
||||||
--width: 336px;
|
|
||||||
}
|
|
||||||
@@ -14,11 +14,11 @@ import {
|
|||||||
|
|
||||||
import { Geolocation } from '@capacitor/geolocation';
|
import { Geolocation } from '@capacitor/geolocation';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { SkeletonDashboard } from '../TestComponents/SkeletonDashboard';
|
import { SkeletonDashboard } from '../components/SkeletonDashboard';
|
||||||
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
import { chevronBackOutline, refreshOutline } from 'ionicons/icons';
|
||||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
import { CurrentWeather } from '../components/CurrentWeather';
|
||||||
|
|
||||||
function Tab1() {
|
function Tab1(): React.JSX.Element {
|
||||||
const router = useIonRouter();
|
const router = useIonRouter();
|
||||||
|
|
||||||
const [currentWeather, setCurrentWeather] = useState(false);
|
const [currentWeather, setCurrentWeather] = useState(false);
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
import {
|
|
||||||
IonButton,
|
|
||||||
IonCol,
|
|
||||||
IonContent,
|
|
||||||
IonHeader,
|
|
||||||
IonPage,
|
|
||||||
IonRow,
|
|
||||||
IonSearchbar,
|
|
||||||
IonTitle,
|
|
||||||
IonToolbar,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { useState } from 'react';
|
|
||||||
import { CurrentWeather } from '../TestComponents/CurrentWeather';
|
|
||||||
|
|
||||||
function Tab2() {
|
|
||||||
const [search, setSearch] = useState('');
|
|
||||||
const [currentWeather, setCurrentWeather] = useState(false);
|
|
||||||
|
|
||||||
const performSearch = async () => {
|
|
||||||
getAddress(search);
|
|
||||||
};
|
|
||||||
|
|
||||||
const getAddress = async (city) => {
|
|
||||||
const response = await fetch(
|
|
||||||
`https://api.weatherapi.com/v1/current.json?key=f93eb660b2424258bf5155016210712&q=${city}&aqi=no`
|
|
||||||
);
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (data && data.current && data.location) {
|
|
||||||
setCurrentWeather(data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonPage>
|
|
||||||
<IonHeader>
|
|
||||||
<IonToolbar>
|
|
||||||
<IonTitle>Search</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
<IonContent fullscreen>
|
|
||||||
<IonHeader collapse="condense">
|
|
||||||
<IonToolbar>
|
|
||||||
<IonTitle size="large">Search</IonTitle>
|
|
||||||
</IonToolbar>
|
|
||||||
</IonHeader>
|
|
||||||
|
|
||||||
<IonRow className="ion-justify-content-center ion-margin-top ion-align-items-center">
|
|
||||||
<IonCol size="7">
|
|
||||||
<IonSearchbar
|
|
||||||
placeholder="Try 'London'"
|
|
||||||
animated
|
|
||||||
value={search}
|
|
||||||
onIonChange={(e) => setSearch(e.target.value)}
|
|
||||||
/>
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="5">
|
|
||||||
<IonButton
|
|
||||||
expand="block"
|
|
||||||
className="ion-margin-start ion-margin-end"
|
|
||||||
onClick={performSearch}
|
|
||||||
>
|
|
||||||
Search
|
|
||||||
</IonButton>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
|
|
||||||
<div style={{ marginTop: '-0.8rem' }}>
|
|
||||||
{currentWeather ? (
|
|
||||||
<CurrentWeather currentWeather={currentWeather} />
|
|
||||||
) : (
|
|
||||||
<h3 className="ion-text-center">Your search result will appear here</h3>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</IonContent>
|
|
||||||
</IonPage>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Tab2;
|
|
||||||
@@ -9,10 +9,10 @@ import {
|
|||||||
IonTitle,
|
IonTitle,
|
||||||
IonToolbar,
|
IonToolbar,
|
||||||
} from '@ionic/react';
|
} from '@ionic/react';
|
||||||
import { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { CurrentWeather } from '../components/CurrentWeather';
|
import { CurrentWeather } from '../components/CurrentWeather';
|
||||||
|
|
||||||
function Tab2() {
|
function Tab2(): React.JSX.Element {
|
||||||
const [search, setSearch] = useState('');
|
const [search, setSearch] = useState('');
|
||||||
const [currentWeather, setCurrentWeather] = useState(false);
|
const [currentWeather, setCurrentWeather] = useState(false);
|
||||||
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import { IonCardSubtitle, IonCol, IonIcon, IonNote, IonRow } from '@ionic/react';
|
|
||||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
export const WeatherProperty = ({ type, currentWeather }: { type: any; currentWeather: any }) => {
|
|
||||||
const [property, setProperty] = useState(false);
|
|
||||||
|
|
||||||
const properties = {
|
|
||||||
wind: {
|
|
||||||
isIcon: false,
|
|
||||||
icon: '/assets/WeatherDemo/wind.png',
|
|
||||||
alt: 'wind',
|
|
||||||
label: 'Wind',
|
|
||||||
value: `${currentWeather.current.wind_mph}mph`,
|
|
||||||
},
|
|
||||||
feelsLike: {
|
|
||||||
isIcon: true,
|
|
||||||
icon: thermometerOutline,
|
|
||||||
alt: 'feels like',
|
|
||||||
label: 'Feels like',
|
|
||||||
value: `${currentWeather.current.feelslike_c}°C`,
|
|
||||||
},
|
|
||||||
indexUV: {
|
|
||||||
isIcon: true,
|
|
||||||
icon: sunnyOutline,
|
|
||||||
alt: 'index uv',
|
|
||||||
label: 'Index UV',
|
|
||||||
value: currentWeather.current.uv,
|
|
||||||
},
|
|
||||||
pressure: {
|
|
||||||
isIcon: true,
|
|
||||||
icon: pulseOutline,
|
|
||||||
alt: 'pressure',
|
|
||||||
label: 'Pressure',
|
|
||||||
value: `${currentWeather.current.pressure_mb} mbar`,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setProperty(properties[type]);
|
|
||||||
}, [type]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<IonCol size="6">
|
|
||||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
|
||||||
<IonCol size="3">
|
|
||||||
{!property.isIcon && (
|
|
||||||
<img alt={property.alt} src={property.icon} height="32" width="32" />
|
|
||||||
)}
|
|
||||||
{property.isIcon && (
|
|
||||||
<IonIcon icon={property.icon} color="medium" style={{ fontSize: '2rem' }} />
|
|
||||||
)}
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="9">
|
|
||||||
<IonCardSubtitle>{property.label}</IonCardSubtitle>
|
|
||||||
<IonNote>{property.value}</IonNote>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
</IonCol>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import { IonCard, IonCardContent, IonGrid, IonRow, IonText, IonCardTitle } from '@ionic/react';
|
|
||||||
import { WeatherProperty } from './WeatherProperty';
|
|
||||||
|
|
||||||
export const CurrentWeather = ({ currentWeather }: { currentWeather: any }) => (
|
|
||||||
<IonGrid>
|
|
||||||
<IonCard>
|
|
||||||
<IonCardContent className="ion-text-center">
|
|
||||||
<IonText color="primary">
|
|
||||||
<h1>
|
|
||||||
{currentWeather.location.region},{' '}
|
|
||||||
<span style={{ color: 'gray' }}>{currentWeather.location.country}</span>
|
|
||||||
</h1>
|
|
||||||
</IonText>
|
|
||||||
|
|
||||||
<div className="ion-margin-top">
|
|
||||||
<img
|
|
||||||
alt="condition"
|
|
||||||
src={currentWeather.current.condition.icon.replace('//', 'https://')}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<IonText color="dark">
|
|
||||||
<h1 style={{ fontWeight: 'bold' }}>{currentWeather.current.condition.text}</h1>
|
|
||||||
</IonText>
|
|
||||||
|
|
||||||
<IonText color="medium">
|
|
||||||
<p>{new Date(currentWeather.location.localtime).toDateString()}</p>
|
|
||||||
</IonText>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
|
||||||
{currentWeather.current.temp_c}℃
|
|
||||||
</IonCardTitle>
|
|
||||||
|
|
||||||
<IonGrid className="ion-margin-top">
|
|
||||||
<IonRow>
|
|
||||||
<WeatherProperty type="wind" currentWeather={currentWeather} />
|
|
||||||
<WeatherProperty type="feelsLike" currentWeather={currentWeather} />
|
|
||||||
</IonRow>
|
|
||||||
|
|
||||||
<IonRow className="ion-margin-top">
|
|
||||||
<WeatherProperty type="indexUV" currentWeather={currentWeather} />
|
|
||||||
<WeatherProperty type="pressure" currentWeather={currentWeather} />
|
|
||||||
</IonRow>
|
|
||||||
</IonGrid>
|
|
||||||
</IonCardContent>
|
|
||||||
</IonCard>
|
|
||||||
</IonGrid>
|
|
||||||
);
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
import {
|
|
||||||
IonCard,
|
|
||||||
IonCardContent,
|
|
||||||
IonCardSubtitle,
|
|
||||||
IonCardTitle,
|
|
||||||
IonCol,
|
|
||||||
IonGrid,
|
|
||||||
IonIcon,
|
|
||||||
IonNote,
|
|
||||||
IonRow,
|
|
||||||
IonSkeletonText,
|
|
||||||
IonText,
|
|
||||||
IonThumbnail,
|
|
||||||
} from '@ionic/react';
|
|
||||||
import { pulseOutline, sunnyOutline, thermometerOutline } from 'ionicons/icons';
|
|
||||||
|
|
||||||
export const SkeletonDashboard = () => (
|
|
||||||
<IonGrid>
|
|
||||||
<IonCard>
|
|
||||||
<IonCardContent className="ion-text-center">
|
|
||||||
<IonText color="primary">
|
|
||||||
<h1>
|
|
||||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
|
||||||
</h1>
|
|
||||||
</IonText>
|
|
||||||
|
|
||||||
<div className="ion-margin-top">
|
|
||||||
<IonThumbnail>
|
|
||||||
<IonSkeletonText animated style={{ width: '2rem', height: '2rem' }} />
|
|
||||||
</IonThumbnail>
|
|
||||||
|
|
||||||
<IonText color="dark">
|
|
||||||
<h1 style={{ fontWeight: 'bold' }}>
|
|
||||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
|
||||||
</h1>
|
|
||||||
</IonText>
|
|
||||||
|
|
||||||
<IonText color="medium">
|
|
||||||
<p>
|
|
||||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
|
||||||
</p>
|
|
||||||
</IonText>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<IonCardTitle style={{ fontSize: '3rem' }} className="ion-margin-top">
|
|
||||||
<IonSkeletonText animated style={{ height: '3rem', width: '30%', textAlign: 'center' }} />
|
|
||||||
</IonCardTitle>
|
|
||||||
|
|
||||||
<IonGrid className="ion-margin-top">
|
|
||||||
<IonRow>
|
|
||||||
<IonCol size="6">
|
|
||||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
|
||||||
<IonCol size="3">
|
|
||||||
<img alt="wind" src="/assets/WeatherDemo/wind.png" height="32" width="32" />
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="9">
|
|
||||||
<IonCardSubtitle>Wind</IonCardSubtitle>
|
|
||||||
<IonNote>
|
|
||||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
|
||||||
</IonNote>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="6">
|
|
||||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
|
||||||
<IonCol size="3">
|
|
||||||
<IonIcon icon={thermometerOutline} color="medium" style={{ fontSize: '2rem' }} />
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="9">
|
|
||||||
<IonCardSubtitle>Feels like</IonCardSubtitle>
|
|
||||||
<IonNote>
|
|
||||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
|
||||||
</IonNote>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
|
|
||||||
<IonRow className="ion-margin-top">
|
|
||||||
<IonCol size="6">
|
|
||||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
|
||||||
<IonCol size="3">
|
|
||||||
<IonIcon icon={sunnyOutline} color="medium" style={{ fontSize: '2rem' }} />
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="9">
|
|
||||||
<IonCardSubtitle>Index UV</IonCardSubtitle>
|
|
||||||
<IonNote>
|
|
||||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
|
||||||
</IonNote>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="6">
|
|
||||||
<IonRow className="ion-justify-content-center ion-align-items-center">
|
|
||||||
<IonCol size="3">
|
|
||||||
<IonIcon icon={pulseOutline} color="medium" style={{ fontSize: '2rem' }} />
|
|
||||||
</IonCol>
|
|
||||||
|
|
||||||
<IonCol size="9">
|
|
||||||
<IonCardSubtitle>Pressure</IonCardSubtitle>
|
|
||||||
<IonNote>
|
|
||||||
<IonSkeletonText animated style={{ height: '2rem', width: '90%' }} />
|
|
||||||
</IonNote>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
</IonCol>
|
|
||||||
</IonRow>
|
|
||||||
</IonGrid>
|
|
||||||
</IonCardContent>
|
|
||||||
</IonCard>
|
|
||||||
</IonGrid>
|
|
||||||
);
|
|
||||||
@@ -23,6 +23,7 @@ function DemoWeatherAppUi() {
|
|||||||
</IonRouterOutlet>
|
</IonRouterOutlet>
|
||||||
|
|
||||||
{/* */}
|
{/* */}
|
||||||
|
|
||||||
<IonTabBar slot="bottom">
|
<IonTabBar slot="bottom">
|
||||||
<IonTabButton tab="tab1" href="/demo-weather-app-ui/tab1">
|
<IonTabButton tab="tab1" href="/demo-weather-app-ui/tab1">
|
||||||
<IonIcon icon={cloudOutline} />
|
<IonIcon icon={cloudOutline} />
|
||||||
|
|||||||
Reference in New Issue
Block a user