refactor: refactor ChallengeItem

next.config.js

@@ -1,5 +1,5 @@
-import remarkGfm from 'remark-gfm'
 import createMDX from '@next/mdx'
+import remarkGfm from 'remark-gfm'
 
 const withMDX = createMDX({
   // Add markdown plugins here, as desired
@@ -13,6 +13,9 @@ const withMDX = createMDX({
 const nextConfig = {
   reactStrictMode: true,
   pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
+  images: {
+    domains: ['avatars.githubusercontent.com'],
+  },
 }
 
 export default withMDX(nextConfig)

public/icons/dai.svg

@@ -0,0 +1,11 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2047_11056)">
+<rect x="0.313477" y="0.313477" width="37.3735" height="37.3735" rx="18.6867" fill="white"/>
+<path d="M19.0002 0.313477C29.3211 0.313477 37.687 8.6793 37.687 19.0002C37.687 29.3211 29.3211 37.687 19.0002 37.687C8.6793 37.687 0.313477 29.3211 0.313477 19.0002C0.313477 8.6793 8.6793 0.313477 19.0002 0.313477ZM18.8005 9.65685H11.1483V15.723H8.48893V17.8965H11.1483V20.1775H8.48893V22.3498H11.1483V28.3436H18.8005C23.4021 28.3436 26.9035 25.8968 28.2502 22.351H30.6794V20.1787H28.7827C28.8295 19.7932 28.8528 19.3985 28.8528 18.9991V18.9453C28.8528 18.5903 28.8341 18.2399 28.7979 17.8965H30.6794V15.7242H28.2957C26.983 12.1258 23.4547 9.65685 18.8005 9.65685ZM25.9061 22.351C24.73 24.7744 22.2027 26.3943 18.8005 26.3943H13.2879V22.351H25.9061ZM26.5649 17.8965C26.6139 18.2551 26.6396 18.623 26.6396 18.9991V19.0516C26.6396 19.4359 26.6127 19.8108 26.5613 20.1775H13.2867V17.8965H26.566H26.5649ZM18.8017 11.6026C22.219 11.6026 24.7546 13.2657 25.9237 15.723H13.2867V11.6026H18.7993H18.8017Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_2047_11056">
+<rect x="0.313477" y="0.313477" width="37.3735" height="37.3735" rx="18.6867" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/Challenges/ChallengeItem.tsx

@@ -1,5 +1,6 @@
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
+import Image from 'next/image'
 import { useState } from 'react'
 import ArrowUpRight from '../Icons/ArrowUpRight'
 
@@ -74,21 +75,49 @@ const ChallengeItem = ({ challenge }: { challenge: Challenge }) => {
             </thead>
             <tbody>
               <tr>
-                <Participants>
-                  {challenge.commentCount.totalCount}+
-                  {challenge.assignees.nodes.map((assignee) => (
-                    <img
-                      key={assignee.login}
-                      src={assignee.avatarUrl}
-                      alt={assignee.login}
-                      className="avatar"
-                    />
-                  ))}
-                </Participants>
+                {challenge.commentCount.totalCount > 0 ? (
+                  <Participants>
+                    {challenge.commentCount.totalCount}+
+                    <AvatarContainer>
+                      {challenge.commentsDetailed.nodes
+                        .slice(0, 5)
+                        .map((comment) => (
+                          <Avatar
+                            key={comment.id}
+                            width={28}
+                            height={28}
+                            src={comment.author.avatarUrl}
+                            alt={comment.author.login}
+                            className="avatar"
+                          />
+                        ))}
+                    </AvatarContainer>
+                  </Participants>
+                ) : (
+                  'No Participants Yet'
+                )}
                 <td>
-                  {challenge.assignees.nodes
-                    .map((assignee) => assignee.login)
-                    .join(', ')}
+                  {challenge.commentCount.totalCount > 0 && (
+                    <Participants>
+                      {challenge.assignees.nodes
+                        .map((assignee) => assignee.login)
+                        .join(', ')}
+                      <AvatarContainer>
+                        {challenge.assignees.nodes
+                          .slice(0, 5)
+                          .map((assignee) => (
+                            <Avatar
+                              key={assignee.avatarUrl}
+                              width={28}
+                              height={28}
+                              src={assignee.avatarUrl}
+                              alt={assignee.login}
+                              className="avatar"
+                            />
+                          ))}
+                      </AvatarContainer>
+                    </Participants>
+                  )}
                 </td>
                 <td>
                   {challenge.labels.nodes.map((label) => (
@@ -121,7 +150,15 @@ const ChallengeItem = ({ challenge }: { challenge: Challenge }) => {
             </tbody>
           </table>
           <RewardContainer>
-            <div>Reward:</div>
+            <span>
+              <CurrencyContainer>
+                <Image src="/icons/dai.svg" alt="dai" width={37} height={37} />
+              </CurrencyContainer>
+              <RewardInfo>
+                <p>Reward:</p>
+                <p>1000 DAI</p>
+              </RewardInfo>
+            </span>
             <GithubButton href={challenge.url} target="_blank">
               See on Github
               <IconContainer>
@@ -233,12 +270,6 @@ const Content = styled.div`
     line-height: 130%;
   }
 
-  .avatar {
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-  }
-
   .label {
     font-size: 14px;
     line-height: 20px;
@@ -254,6 +285,16 @@ const Participants = styled.td`
   gap: 8px;
 `
 
+const AvatarContainer = styled.div`
+  display: flex;
+  gap: -4px;
+`
+
+const Avatar = styled(Image)`
+  border-radius: 50%;
+  border: 1px solid white;
+`
+
 const GithubButton = styled.a`
   width: 160px;
   height: 42px;
@@ -284,6 +325,42 @@ const RewardContainer = styled.div`
   align-self: stretch;
   border: 1px solid rgba(0, 0, 0, 0.18);
   margin-bottom: 20px;
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+  }
+`
+
+const CurrencyContainer = styled.div`
+  display: flex;
+  width: 66px;
+  height: 66px;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 999px;
+  background: #000;
+  color: white;
+`
+
+const RewardInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  & > p:first-of-type {
+    font-size: 18px;
+    line-height: 22px;
+    opacity: 0.5;
+  }
+
+  & > p:last-of-type {
+    font-size: 22px;
+    line-height: 26px;
+  }
 `
 
 export default ChallengeItem

src/pages/api/challenges.ts

@@ -49,6 +49,7 @@ query {
               id
               author {
                 login
+                avatarUrl
               }
               body
               createdAt