72 lines
1.7 KiB
TypeScript
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),
|
|
});
|