import PropTypes from "prop-types"; import TimeAgo from "react-timeago"; import Link from "next/link"; import { Header, Item, Label, Image, Segment, Button } from "semantic-ui-react"; //List => Panel => ItemView export default function PostList(props) { const headline = props.headline ? props.headline : "All Posts"; return ( <div> <Header as="h1" icon> <Header.Content> {headline}{" "} {props.tagData && ( <span> {" "} In <i>{props.tagData.name}</i> </span> )} </Header.Content> </Header> {props.posts.length < 1 && <p>Not Records Found!</p>} <Item.Group divided> {props.posts && props.posts.map((item) => { let author = "Admin"; if (item.author) { author = item.author.firstName + " " + item.author.lastName; } return ( <Item key={item._id}> <div className="image"> <Link href={`/blog/[slug]`} as={`/blog/${item.slug}`}> <a> <Image alt={item.title} src={item.image} /> </a> </Link> </div> <Item.Content> <Item.Header> <Link href={`/blog/[slug]`} as={`/blog/${item.slug}`}> <a>{item.title}</a> </Link> </Item.Header> <Item.Meta> <span className="cinema"> {author} | <TimeAgo date={item.createdAt} /> </span> </Item.Meta> <Item.Description>{item.summary}</Item.Description> <Item.Extra> {item.tags.map((tag) => ( <Link passHref key={tag} href={`/blog/tags/[slug]`} as={`/blog/tags/${tag}`} > <Label as="a">{tag}</Label> </Link> ))} </Item.Extra> </Item.Content> </Item> ); })} </Item.Group> {props.showLoadMore && !props.isLoading && ( <Segment textAlign="center"> <Button color="blue" onClick={props.loadMore}> Load More </Button> </Segment> )} </div> ); } PostList.propTypes = { posts: PropTypes.array, tagData: PropTypes.object, showLoadMore: PropTypes.bool, loadMore: PropTypes.func, headline: PropTypes.string, isLoading: PropTypes.bool, };