Add 'New' icon for newest Teks

components/awtis/mizik-lis.js

@@ -1,8 +1,13 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
+import {differenceInDays} from 'date-fns'
 
 import {makeStyles} from '@material-ui/core/styles'
 import {List, ListItem, ListItemText} from '@material-ui/core'
+import FiberNewOutlinedIcon from '@material-ui/icons/FiberNewOutlined'
+
+const JOD_LA = new Date()
+const NEW_LIMIT = 7
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -12,6 +17,11 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
+const jouDiferans = piblikasyon => {
+  const piblikasyonDat = new Date(piblikasyon)
+  return differenceInDays(JOD_LA, piblikasyonDat)
+}
+
 export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi, meteSlugTeksChwazi}) {
   const classes = useStyles()
   const router = useRouter()
@@ -36,7 +46,7 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
 
   return (
     <List component='nav' className={classes.root} aria-label='mizik'>
-      {teks.map(({slug, tit, awtis}) => (
+      {teks.map(({slug, tit, awtis, published_at}) => (
         <ListItem
           key={slug}
           button
@@ -45,6 +55,9 @@ export default function MizikLis({meteEsMobilOuve, niAwtis, teks, slugTeksChwazi
           onClick={() => handleClick(slug)}
         >
           <ListItemText primary={tit} secondary={niAwtis ? awtis.map(a => a.alias).join() : null} />
+          {jouDiferans(published_at) < NEW_LIMIT && (
+            <FiberNewOutlinedIcon style={{fontSize: 40}} color='primary' />
+          )}
         </ListItem>
       ))}
     </List>