diff options
Diffstat (limited to 'src/web/components/post/Post.jsx')
| -rw-r--r-- | src/web/components/post/Post.jsx | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/src/web/components/post/Post.jsx b/src/web/components/post/Post.jsx new file mode 100644 index 0000000..3780a38 --- /dev/null +++ b/src/web/components/post/Post.jsx @@ -0,0 +1,63 @@ +import React from "react"; +import {useLocation, useNavigate} from "react-router-dom"; +import dayjs from "dayjs"; +import * as relativeTime from "dayjs/plugin/relativeTime"; + +import Card from "components/card/Card.jsx"; +import styles from "./Post.css"; +import {getInfoFromSubreact} from "helpers/Location.jsx"; + +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; + +dayjs.extend(relativeTime); + +function TopRow({title, timeUpdated}) { + return ( + <div className={styles.titleContainer}> + <h3> + {title} + </h3> + <h4> + {dayjs.unix(timeUpdated).fromNow()} + </h4> + </div> + ); +} + +function MiddleRow({contents}) { + return ( + <h4> + {contents} + </h4> + ); +} + +function BottomRow({subreact}) { + const {icon, name} = getInfoFromSubreact(subreact); + + return ( + <div className={styles.postIconsContainer}> + <FontAwesomeIcon icon={icon} className={styles.subreactIcon} /> + <div> + {name} + </div> + </div> + ); +} + +export default function Post({title, contents, timeUpdated, placeholder, subreact, uid}) { + const location = useLocation(); + const navigate = useNavigate(); + + return ( + <Card className={styles.postCard + (placeholder ? " " + styles.placeholder : "")} + onClick={() => {navigate("/" + subreact + "/" + uid);}}> + <img src={placeholder ? null : "/image/" + uid + ".png?thumbnail=1"} /> + <div className={styles.rowContainer}> + <TopRow title={title} timeUpdated={timeUpdated} /> + <MiddleRow contents={contents} /> + <BottomRow subreact={subreact} /> + </div> + </Card> + ); +}
\ No newline at end of file |