Added new LikeStack logic

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>
     

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>
     </>
   )