118 lines
3.8 KiB
TypeScript
118 lines
3.8 KiB
TypeScript
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>
|
|
);
|