refactor: update placements design (#261)

Trendyol · Jun 30, 2023 · ddd7f77 · ddd7f77
1 parent d74c9ec
commit ddd7f77
Showing 1 changed file with 34 additions and 10 deletions.
diff --git a/client/src/modules/Leaderboard/index.tsx b/client/src/modules/Leaderboard/index.tsx
@@ -1,8 +1,11 @@
 import Community from '@components/shared/Community';
+import ListingCard from '@components/shared/ListingCard';
 import Progression from '@components/shared/Progression';
-import Avatar from '@components/ui/Avatar';
-import Card from '@components/ui/Card';
+import Button from '@components/ui/Button';
 import { useUsers } from '@hooks/data/useUsers';
+import { getSeedAvatar, getSeedName } from '@utils/common';
+import { Tooltip } from 'flowbite-react';
+import Image from 'next/image';
 
 const Leaderboard = () => {
   const filter = {
@@ -12,17 +15,38 @@ const Leaderboard = () => {
   };
   const { users } = useUsers(filter);
 
+  const getUserLink = (id: string) => `/user/${id}`;
+
   return (
     <>
       <div className="flex flex-1 gap-4">
-        <Card className="h-fit min-h-[600px] overflow-x-auto rounded-lg">
-          <div className="text-xl font-semibold text-primary-400">Leaderboard</div>
-          <div className="mt-3 flex flex-col gap-4">
-            {users?.map(({ id, name, avatar, points }) => (
-              <Avatar id={id} key={id} name={name} avatar={avatar} points={points} />
-            ))}
-          </div>
-        </Card>
+        <div className="flex flex-1 flex-col gap-4 ">
+          {users?.map(({ id, name, avatar, points, bio, email }) => (
+            <ListingCard
+              key={id}
+              href={getUserLink(id)}
+              title={name || getSeedName(id)}
+              subtitle={`${points} points`}
+              content={bio}
+              action={
+                <Tooltip content="Available soon">
+                  <Button disabled size={'small'}>
+                    Follow
+                  </Button>
+                </Tooltip>
+              }
+              image={
+                <Image
+                  className="rounded-md object-cover"
+                  alt="avatar"
+                  width={50}
+                  height={50}
+                  src={avatar || getSeedAvatar(id)}
+                />
+              }
+            />
+          ))}
+        </div>
         <div className="flex w-sidebar flex-shrink-0 flex-col gap-4 xl:w-[270px] md:hidden">
           <Progression />
           <Community />