add progress bar to next level

Author: Roshan Jossy

src/components/UserDetails/Badges/Badge.tsx

@@ -14,13 +14,37 @@ const Badge = ({badge}: any) => {
     )
 
     return (
-        <>
-            <h4>{data.displayName}</h4>
-                <Hexagon size={60} color="red" >
-                    <BadgeIcon displayName={data.displayName} />
-                </Hexagon>
-            {data.currentLevel}
-        </>
+        <div className="flex items-center ">
+            <Hexagon size={60} color="red" >
+                <BadgeIcon displayName={data.displayName} />
+            </Hexagon>
+            <div className=" ml-8">
+                <span className="font-bold block">Level: {data.currentLevel}</span>
+                <span className="text-sm block">524 lines to next level</span>
+                <div className="progress-bar">
+                    <style jsx>
+                        {`
+                            .progress-bar {
+                                position: relative;
+                                height: 10px;
+                                width: 120px;
+                                background-color: #ccc;
+                                border-radius: 5px;
+                                box-shadow: inset 0.3em 0.3em 1em rgba(0,0,0,0.3);
+                            }
+                            .progress-bar:after {
+                                content: '';
+                                position: absolute;
+                                width: ${1.2 * data.progressPercentageToNextLevel}px;
+                                height: inherit;
+                                background-color: red;
+                                border-radius: 5px;
+                            }
+                        `}
+                    </style>
+                </div>
+            </div>
+        </div>
     )
 }
 

src/components/UserDetails/Badges/BadgeList.tsx

@@ -29,13 +29,13 @@ const BadgeList = ({user}: any) => {
     }
 
     return (
-        <>
+        <div className="space-y-4">
             {
                 data.badges.edges.map((badge)=> (<Badge key={badge.node.id} badge={badge.node}/>))
             }
             {hasNext? <button onClick={()=>{loadNext(2)}}>Load more</button>: null}
 
-        </>
+        </div>
     )
 }