56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import {
|
|
IonModal,
|
|
IonHeader,
|
|
IonToolbar,
|
|
IonTitle,
|
|
IonContent,
|
|
IonButton,
|
|
IonIcon,
|
|
IonList,
|
|
IonItem,
|
|
IonNote,
|
|
IonLabel,
|
|
} from '@ionic/react';
|
|
import Store from '../../store';
|
|
import { getNotifications } from '../../store/selectors';
|
|
|
|
import { close } from 'ionicons/icons';
|
|
|
|
const NotificationItem = ({ notification }) => (
|
|
<IonItem>
|
|
<IonLabel>{notification.title}</IonLabel>
|
|
<IonNote slot="end">{notification.when}</IonNote>
|
|
<IonButton slot="end" fill="clear" color="dark">
|
|
<IonIcon icon={close} />
|
|
</IonButton>
|
|
</IonItem>
|
|
);
|
|
|
|
const Notifications = ({ open, onDidDismiss }) => {
|
|
const notifications = Store.useState(getNotifications);
|
|
|
|
return (
|
|
<IonModal isOpen={open} onDidDismiss={onDidDismiss}>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Notifications</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent fullscreen>
|
|
<IonHeader collapse="condense">
|
|
<IonToolbar>
|
|
<IonTitle size="large">Notifications</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonList>
|
|
{notifications.map(notification => (
|
|
<NotificationItem notification={notification} />
|
|
))}
|
|
</IonList>
|
|
</IonContent>
|
|
</IonModal>
|
|
);
|
|
};
|
|
|
|
export default Notifications;
|