From 361a350a8436bd15a37868fddcddb51cd393d966 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Sat, 11 Mar 2023 22:41:22 +0000
Subject: [PATCH] Added icons to post Icon
---
.../src/components/post/Post.tsx | 22 ++++++-------------
.../src/components/post/PostAction.tsx | 22 +++++++++++++++++--
2 files changed, 27 insertions(+), 17 deletions(-)
diff --git a/daily-thought-frontend/src/components/post/Post.tsx b/daily-thought-frontend/src/components/post/Post.tsx
index d501b3bb..9a0179a7 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 95d3a10c..36fc67a8 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>
)
}
--
GitLab