Leader board UI #268
Leader board UI #268
Conversation
…ge as described in Figma
…con to notFoundJSX and some style fixes
Change direction he
Adding skeleton loading spinner in members page and Applying logic for member search in the input
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -26,6 +26,8 @@ async function fetchProjectsData({ | |||
| }, | |||
| body: JSON.stringify({ page, limit, filter }), | |||
| }); | |||
| console.log(); | |||
|
|
|||
| <Monthly /> | ||
| <h3 className=' text-left p-5'>Weekly Score </h3> | ||
| <Weekly /> | ||
| </div> |
There was a problem hiding this comment.
Can you insert the hard coded texts into our local files?
| )} | ||
| {members.length === 0 && searchTerm === '' && <SkeletonCards cards={6} />} | ||
| {members.length === 0 && searchTerm !== '' && notFoundJSX} | ||
| {members.length !== 0 && <MembersList members={members} />} |
There was a problem hiding this comment.
members.length === 0 and also searchTerm === '' could be save into variables and from the value you could remove members.length !== 0 and searchTerm !== '' (you can use ! operator on your variables)
| // darkBg: colors.slate[950], | ||
| // darkAccBg: colors.slate[800], | ||
| // lightText: colors.slate[50], | ||
| // discordDark: colors.white, |
| <div className='flex flex-col gap-10 '> | ||
| <span>name: <span></span>{'roi'}</span> | ||
| <span>additions: <><span className='text-green-500'>32</span></></span> | ||
| <span>commits:</span> |
There was a problem hiding this comment.
Can you extract this as well to the translations file ?
| export type Welcome = { | ||
| data: Data; | ||
| } | ||
|
|
There was a problem hiding this comment.
Cantyou use Data instead of creating new type that using entire different type ?
| additions?: number; | ||
| deletions?: number; | ||
| commits?: number; | ||
| } |
There was a problem hiding this comment.
One question about this file :
Why are all the fields optional? don`t really make sense that no field in a type is a must.
| > | ||
| <Skeleton className="w-[30px] h-[30px] rounded-full bg-purple-100 dark:bg-slate-100/50" /> | ||
| <Skeleton className="w-[30px] h-[30px] rounded-full bg-purple-100 dark:bg-slate-100/50" /> | ||
| <Skeleton className="w-[30px] h-[30px] rounded-full bg-purple-100 dark:bg-slate-100/50" /> |
There was a problem hiding this comment.
I know its for testing but you can use map to display lists based on array of data
| <div className="flex mx-auto w-[90%] flex-wrap gap-4 mt-6 justify-between"> | ||
| {cardsToRender.map(card => ( | ||
| <SkeletonCard key={card} /> | ||
| ))} |
There was a problem hiding this comment.
Your key is the entire card object? can 2 cards be the same?
more work need to be done on leader board chart and and translate and connect translate light mod and dark mode adjustments