46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import { checkmarkOutline, closeOutline } from 'ionicons/icons';
|
|
import Button from './ui/Button';
|
|
import Icon from './ui/Icon';
|
|
import List from './ui/List';
|
|
import ListItem from './ui/ListItem';
|
|
import VirtualScroll from './ui/VirtualScroll';
|
|
|
|
const NotificationItem = ({ i }) => (
|
|
<ListItem className="flex align-center">
|
|
<img
|
|
src={`/img/faces/image-${(i % 66) + 1}.png`}
|
|
alt="Notification"
|
|
className="block rounded-full w-8 h-8 mr-4"
|
|
/>
|
|
<div className="flex-1">
|
|
<span className="p-0 m-0 align-middle">You have a new friend request</span>
|
|
</div>
|
|
<div>
|
|
<Button className="background-transparent px-1 py-1 text-green-400 text-lg">
|
|
<Icon icon={checkmarkOutline} />
|
|
</Button>
|
|
<Button className="background-transparent px-1 py-1 text-red-400 text-lg">
|
|
<Icon icon={closeOutline} />
|
|
</Button>
|
|
</div>
|
|
</ListItem>
|
|
);
|
|
|
|
const Notifications = () => (
|
|
<div className="w-full h-full flex flex-col">
|
|
<div className="p-4">
|
|
<h2 className="text-xl">Notifications</h2>
|
|
</div>
|
|
<List className="flex-1">
|
|
<VirtualScroll
|
|
totalCount={1000}
|
|
overscan={200}
|
|
style={{ height: '100%', width: '100%' }}
|
|
itemContent={index => <NotificationItem i={index} />}
|
|
/>
|
|
</List>
|
|
</div>
|
|
);
|
|
|
|
export default Notifications;
|