Small quality of life improvements (#13)
* wip: swanky page title * wip: empty feed message * wip: add margin
This commit is contained in:
parent
c46205f220
commit
185f405fe2
2 changed files with 25 additions and 6 deletions
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>🏴☠️ Yet Another RSS Reader 🏴☠️</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
|
|
Loading…
Reference in a new issue