changelog-app/changelog-app-ui/src/components/feed.jsx
2024-09-30 06:30:56 -04:00

56 lines
1.2 KiB
JavaScript

import { dateParser } from "../utils/dateParser";
import { HashTagLink } from "../utils/links";
import PropTypes from "prop-types";
import styles from "./feed.module.css";
const Feed = (props) => {
const feedItems = props.entries
? props.entries.map((item) => (
<LogEntryCard
body={item.body}
topics={item.topics}
date={item.date}
key={item.id}
/>
))
: [];
return <div className={styles.feed}>{feedItems}</div>;
};
const FeedTopics = ({ topics }) => {
const hashtagLinks = topics.map((item) => (
<HashTagLink tag={item} key={crypto.randomUUID()} />
));
return <div className={styles.hashtags}>{hashtagLinks}</div>;
};
const LogEntryCard = ({ body, date, topics }) => {
return (
<div className={styles.card}>
<p>{body}</p>
<div className={styles.cardBottom}>
<FeedTopics topics={topics} />
<p>{dateParser(date)}</p>
</div>
</div>
);
};
FeedTopics.propTypes = {
topics: PropTypes.array,
};
Feed.propTypes = {
entries: PropTypes.array,
};
LogEntryCard.propTypes = {
body: PropTypes.string,
date: PropTypes.string,
topics: PropTypes.array,
};
//<p>{date.toLocaleString()}</p>
export default Feed;