diff --git a/daily-thought-frontend/src/components/post/AnswerCard.tsx b/daily-thought-frontend/src/components/post/AnswerCard.tsx index e816fb20e2e8c044fd9ad00bff0a386c66491844..d55d476005153d227d2bd40f3e422982b15772c2 100644 --- a/daily-thought-frontend/src/components/post/AnswerCard.tsx +++ b/daily-thought-frontend/src/components/post/AnswerCard.tsx @@ -38,7 +38,7 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({ <ChatBubbleLeftIcon className="h-6 w-6" aria-hidden="true"/> </button> </div> - <LikeStack Users={[]} /> + <LikeStack Users={[post.User, post.User, post.User, post.User, post.User]} /> </div> </div> diff --git a/daily-thought-frontend/src/components/post/LikeStack.tsx b/daily-thought-frontend/src/components/post/LikeStack.tsx index 002f7ae468dbc094389ae8f433300a81ea393e0a..7656f1dc8dd5b50141feab605cb604ebab79151b 100644 --- a/daily-thought-frontend/src/components/post/LikeStack.tsx +++ b/daily-thought-frontend/src/components/post/LikeStack.tsx @@ -12,26 +12,28 @@ const LikeStack:FC<PropsWithChildren<LikeStackProps>> = ({ return ( <> <div className="flex -space-x-1 overflow-hidden items-center"> - <img - className="inline-block h-6 w-6 rounded-full ring-2 ring-white" - src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" - alt="" - /> - <img - className="inline-block h-6 w-6 rounded-full ring-2 ring-white" - src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" - alt="" - /> - <img - className="inline-block h-6 w-6 rounded-full ring-2 ring-white" - src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" - alt="" - /> - <img - className="inline-block h-6 w-6 rounded-full ring-2 ring-white" - src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" - alt="" - /> + {Users.map((user, index) => { + if(index < 3){ + return ( + <div> + <img + className="inline-block h-6 w-6 rounded-full ring-2 ring-white" + src={user.Avatar} + alt="" + /> + </div> + ) + } else if (index === 3) { + return ( + <div className="inline-block h-6 w-6 rounded-full ring-2 ring-white bg-gray-100 flex items-center justify-center"> + <p className="text-c-pink text-xs">{`+${Users.length - 3}`}</p> + </div> + ) + } else { + return (null) + } + })} + </div> </> )