Small quality of life improvements (#13)

* wip: swanky page title

* wip: empty feed message

* wip: add margin
This commit is contained in:
Marc Cataford 2021-07-27 08:38:31 -04:00 committed by GitHub
parent c46205f220
commit 185f405fe2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 6 deletions

View file

@ -1,5 +1,6 @@
import React, { ReactNode } from 'react'
import Box from '@material-ui/core/Box'
import Typography from '@material-ui/core/Typography'
import Card from '@material-ui/core/Card'
import { makeStyles } from '@material-ui/core/styles'
@ -40,19 +41,36 @@ function ItemCard(props: CardProps): ReactNode {
)
}
function NoItemsNotice(): ReactNode {
return (
<Box
alignSelf="center"
display="flex"
flexDirection="column"
alignItems="center"
mt="50px"
>
<Typography variant="h6">Nothing to see here!</Typography>
<Typography>
Add some feeds in the <strong>Settings</strong> panel to get
started!
</Typography>
</Box>
)
}
export default function FeedsPanel(props: Props): ReactNode {
const { feeds } = props
const flattenedItems = sortFeedItemsByDate(feeds)
const cardList = flattenedItems.map((item) => (
<ItemCard {...item} key={`feed_item_${item.title.replace(' ', '_')}`} />
))
return (
<Box display="flex" flexDirection="column">
{flattenedItems.map((item) => (
<ItemCard
{...item}
key={`feed_item_${item.title.replace(' ', '_')}`}
/>
))}
{cardList.length > 0 ? cardList : <NoItemsNotice />}
</Box>
)
}

View file

@ -1,5 +1,6 @@
<html>
<head>
<title>🏴‍☠️ Yet Another RSS Reader 🏴‍☠️</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>