Files
HKSingleParty/03_source/mobile/src/components/NoSavedEvents/index.tsx

72 lines
1.7 KiB
TypeScript

// REQ0088/favorite-event-empty
import React, { CSSProperties, useState } from 'react';
import { connect } from '../../data/connect';
import { IonIcon, IonLoading } from '@ionic/react';
import { GridLoader } from 'react-spinners';
import { alertCircleOutline, alertOutline } from 'ionicons/icons';
// import AlertSvg from './alert-svgrepo-com.svg';
interface OwnProps {}
interface StateProps {}
interface DispatchProps {}
const override: CSSProperties = {
display: 'block',
margin: '0 auto',
borderColor: 'red',
};
function NoSavedEvents() {
let [loading, setLoading] = useState(true);
let [color, setColor] = useState('#333333');
return (
<>
<div
style={{
height: '80%',
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '3rem',
}}
>
{/* TODO: alert icon modified from svg to IonIcon for build, need fallback */}
<IonIcon icon={alertOutline} />
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '1rem',
}}
>
<div>You have not saved yet</div>
<div style={{ lineHeight: '2rem' }}>
To add your favourites, <br />
simply take a look here
</div>
</div>
</div>
</div>
</>
);
}
export default connect<OwnProps, StateProps, DispatchProps>({
mapStateToProps: (state) => ({}),
component: React.memo(NoSavedEvents),
});