change badge design

Author: Roshan Jossy

src/components/UserDetails/Badges/Badge.tsx

@@ -1,21 +1,25 @@
 import { graphql, useFragment } from "react-relay"
-import CircularProgress from './CircularProgress'
-import { DiAndroid } from '@react-icons/all-files/di/DiAndroid'
+import BadgeIcon from "./BadgeIcon"
+import Hexagon from "./Hexagon"
 
 const Badge = ({badge}: any) => {
     const data = useFragment(
         graphql`
             fragment Badge_node on Badge {
                 displayName
                 progressPercentageToNextLevel
+                currentLevel
             }
         `, badge
     )
 
     return (
         <>
             <h4>{data.displayName}</h4>
-            <DiAndroid  className="w-10 h-10 text-green-600 "/>
+                <Hexagon size={60} color="red" >
+                    <BadgeIcon displayName={data.displayName} />
+                </Hexagon>
+            {data.currentLevel}
         </>
     )
 }

src/components/UserDetails/Badges/BadgeIcon.tsx

@@ -0,0 +1,40 @@
+import { SiC } from "@react-icons/all-files/si/SiC"
+import { SiGo } from "@react-icons/all-files/si/SiGo"
+import { SiPython } from "@react-icons/all-files/si/SiPython"
+import { SiCplusplus } from "@react-icons/all-files/si/SiCplusplus"
+import { SiJavascript } from "@react-icons/all-files/si/SiJavascript"
+import { SiTypescript } from "@react-icons/all-files/si/SiTypescript"
+import { SiJava } from "@react-icons/all-files/si/SiJava"
+import { SiRuby } from "@react-icons/all-files/si/SiRuby"
+import { SiRust } from "@react-icons/all-files/si/SiRust"
+import { SiGnubash } from "@react-icons/all-files/si/SiGnubash"
+import { SiPhp } from "@react-icons/all-files/si/SiPhp"
+import React from "react"
+
+const iconMap = {
+    "Go": <SiGo />,
+    "Python":  <SiPython />,
+    "C":  <SiC />,
+    "C++": <SiCplusplus/>,
+    "JavaScript": <SiJava/>,
+    "TypeScript": <SiTypescript />,
+    "Java": <SiJava />,
+    "Ruby": <SiRuby />,
+    "Rust": <SiRust />,
+    "Unix Sell": <SiGnubash />,
+    "PHP": <SiPhp />
+}
+export default function BadgeIcon ({displayName}) {
+    return (
+        <div className="text-3xl z-10 badge-icon">
+            {iconMap[displayName]}
+            <style>
+                {`
+                    .badge-icon {
+                        color: #00000077;
+                    }
+                `}
+            </style>
+        </div>
+    )
+}

src/components/UserDetails/Badges/BadgeList.tsx

@@ -8,7 +8,7 @@ const BadgeList = ({user}: any) => {
         fragment BadgeList_user on User 
         @refetchable(queryName: "BadgeList_userQuery")
         @argumentDefinitions(
-            count: {type: "Int", defaultValue: 2}
+            count: {type: "Int", defaultValue: 5}
             cursor: {type: "String"}
         ){
             badges(first:$count, after: $cursor) 

src/components/UserDetails/Badges/Hexagon.tsx

@@ -0,0 +1,45 @@
+export default function Hexagon ({children, size, color}) {
+    return (
+
+            <div className="badge-icon-container">
+                {children}
+                <style jsx>
+                    {`
+                        .badge-icon-container {
+                            position: relative;
+                            width: ${size * 0.645}px;
+                            height: ${size}px;
+                            background-image: linear-gradient(90deg, #00ffb8, #13ce9a);
+                            border-radius: ${size / 10}px;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                                
+                        .badge-icon-container:before,
+                        .badge-icon-container:after {
+                            content: '';
+                            display: block;
+                            position: absolute;
+                            top: 0;
+                            bottom: 0;
+                            left: 0;
+                            right: 0;
+                            width: inherit;
+                            height: inherit;
+                            border-radius: inherit;
+                            background-image: inherit;
+                        }
+                            
+                        .badge-icon-container:before {
+                            transform: rotate(60deg);
+                        }
+                        
+                        .badge-icon-container:after {
+                            transform: rotate(-60deg);
+                        }
+                    `}
+                </style>
+            </div>
+    )
+}

src/components/UserDetails/UserDetails.tsx

@@ -36,7 +36,7 @@ const UserDetails = ({user}: Props)=> {
             @{data.handle}
         </h1>
         <Bio user={data}/>
-        <div className="my-4">
+        <div className="my-4 flex space-x-4">
             <span className="font-bold mb-2 flex">
                 <span className="text-2xl mr-2">
                     <GoIssueOpened />