diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx index d501b3bb0564622f7181cee8aa06eccca7c90a14..9a0179a7a35fd07111ec7966ab2e08c17bcbcc98 100644 --- a/daily-thought-frontend/src/components/post/Post.tsx +++ b/daily-thought-frontend/src/components/post/Post.tsx @@ -3,6 +3,9 @@ import { FC, PropsWithChildren } from "react"; import styles from '../../styles/Post.module.css' import PostAction from "./PostAction"; import { generateRandomLinearGradient } from "./Utils"; +import { SlBubble, SlShare } from 'react-icons/sl' +import { AiOutlineHeart } from 'react-icons/ai' +import Avatar from "../profile/avatar"; type PostProps = { User: User, @@ -22,18 +25,7 @@ const Post: FC<PropsWithChildren<PostProps>> = ({ return ( <div className={styles.post}> <div className={styles.header}> - <div className={styles.avatar} style={{backgroundImage: generateRandomLinearGradient(User.Colors, true)}}> - {User.Avatar && - <div> - - </div> - } - {!User.Avatar && - <div> - <p>{User.Username[0]}</p> - </div> - } - </div> + <Avatar User={User}/> <div className={styles.headerInfo}> <div className={styles.headerUserInfo}> <p className={styles.name} >{User.FirstName} {User.LastName}</p> @@ -48,9 +40,9 @@ const Post: FC<PropsWithChildren<PostProps>> = ({ <p className={styles.postContent}>{Post}</p> <div className={styles.postActions}> - <PostAction /> - <PostAction /> - <PostAction /> + <PostAction label="7" icon={<SlBubble />} onClick={null}/> + <PostAction label="0" icon={<AiOutlineHeart />} /> + <PostAction icon={<SlShare />}/> </div> </div> </div> diff --git a/daily-thought-frontend/src/components/post/PostAction.tsx b/daily-thought-frontend/src/components/post/PostAction.tsx index 95d3a10cb5d0933555dae097563a9c79f3f84f5c..36fc67a87bfe6347b6eecfc74f27b73e6b113d57 100644 --- a/daily-thought-frontend/src/components/post/PostAction.tsx +++ b/daily-thought-frontend/src/components/post/PostAction.tsx @@ -1,10 +1,28 @@ +import { FC, PropsWithChildren } from 'react' import styles from '../../styles/PostAction.module.css' -const PostAction = () => { +type PostActionProps ={ + label?: string; + icon: any + onClick: () => any; +} + +const PostAction: FC<PropsWithChildren<PostActionProps>> = ({ + label, + icon, + onClick +}) => { return ( <div className={styles.container}> - <button>Action</button> + <button className={styles.button} onClick={onClick}> + {icon} + + {label && + <span className={styles.label}>{label}</span> + } + + </button> </div> ) }