Home page - Shelf UI

package-lock.json

@@ -12799,6 +12799,11 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-circular-progressbar": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.0.4.tgz",
+      "integrity": "sha512-OfX0ThSxRYEVGaQSt0DlXfyl5w4DbXHsXetyeivmoQrh9xA9bzVPHNf8aAhOIiwiaxX2WYWpLDB3gcpsDJ9oww=="
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",

package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^17.0.8",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
+    "react-circular-progressbar": "^2.0.4",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "typescript": "^4.3.5",

src/components/home/Home.module.scss

@@ -120,6 +120,10 @@
         justify-content: center;
         margin-left: 1rem;
 
+        &.expandButton {
+            background-color: var(--red);
+        }
+
         svg {
             fill: white;
             width: 1.2rem;
@@ -154,48 +158,116 @@ $block-padding: 0 2rem;
         &:nth-child(3) .icon {
             background-color: var(--blue);
         }
-        
-        .icon {
-            width: 4rem;
-            height: 4rem;
-            background-color: var(--grey);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
+    }
 
-            svg {
-                fill: white;
-                width: 3rem;
-            }
+    .icon {
+        width: 4rem;
+        height: 4rem;
+        background-color: var(--grey);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+
+        svg {
+            fill: white;
+            width: 3rem;
         }
+    }
 
-        .info {
-            width: calc(100% - 5rem);
+    .info {
+        width: calc(100% - 5rem);
 
-            label, span {
-                display: block;
-            }
+        label, span {
+            display: block;
+        }
 
-            label {
-                font-size: 1.2rem;
-                color: var(--black);
-                font-weight: 700;
-            }
+        label {
+            font-size: 1.2rem;
+            color: var(--black);
+            font-weight: 700;
+        }
 
-            span {
-                font-size: 1rem;
-                color: var(--grey);
-                font-weight: 500;
-            }
+        span {
+            font-size: 1rem;
+            color: var(--grey);
+            font-weight: 500;
         }
     }
 }
 
 .Shelf {
     padding: #{$block-padding};
+    margin: 2rem 0;
 
     ul {
         list-style: none;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 2rem;
+        padding: 2rem 0;
+    }
+
+    [class*="CircularProgressbar"] {
+        width: 100%;
+        height: 100%;
+    }
+
+    .progress {
+        position: relative;
+        width: 7rem;
+        height: 7rem;
+
+        .text {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            text-align: center;
+            font-size: 1.4rem;
+            color: white;
+            font-weight: 600;
+        }
+    }
+
+    li {
+        border-radius: 3rem;
+        padding: 1.5rem;
+
+        &:nth-child(1) {
+            background-color: var(--orange);
+        }
+
+        &:nth-child(2) {
+            background-color: var(--blue);
+        }
+
+        &:nth-child(3) {
+            background-color: var(--red);
+        }
+
+        &:nth-child(4) {
+            background-color: var(--teal);
+        }        
+    }
+
+    h5 {
+        font-size: 1.2rem;
+        color: white;
+        font-weight: 600;
+        margin-top: 1rem;
+    }
+
+    p {
+        font-size: 1.1rem;
+        color: white;
+
+        &:last-child {
+            margin-top: 1rem;
+        }
     }
 }

src/components/home/Home.tsx

@@ -16,6 +16,9 @@ import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-spe
 import { ReactComponent as BrainIcon } from '../../assets/icons/bx-brain.svg';
 import { ReactComponent as InternBadge } from '../../assets/icons/intern-badge.svg';
 
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+
+
 export const Home: React.FC = () => {
     return <section>
 
@@ -94,7 +97,7 @@ export const Home: React.FC = () => {
                     <BookShelfIcon />
                     Active Shelves
                 </h4>
-                <button>
+                <button className={styles.expandButton}>
                     <ExpandIcon />
                 </button>
                 <button>
@@ -103,25 +106,81 @@ export const Home: React.FC = () => {
             </header>
             <ul>
                 <li>
-                    <div className={styles.progress}></div>
+                    <div className={styles.progress}>
+                        <CircularProgressbar value={30} strokeWidth={7} 
+                            styles={{
+                                path: {
+                                    stroke: 'white',
+                                    strokeLinecap: 'round',
+                                },
+                                trail: {
+                                    stroke: 'rgba(255, 255, 255, 0.25)',
+                                    strokeLinecap: 'round',
+                                }}
+                            } />
+                            
+                        <span className={styles.text}> 30% </span>
+                    </div>
                     <h5> All Words </h5>
                     <p> Vocabulary </p>
                     <p> 1.2K Words </p>
                 </li>
                 <li>
-                    <div className={styles.progress}></div>
+                    <div className={styles.progress}>
+                        <CircularProgressbar value={50} strokeWidth={7} 
+                            styles={{
+                                path: {
+                                    stroke: 'white',
+                                    strokeLinecap: 'round',
+                                },
+                                trail: {
+                                    stroke: 'rgba(255, 255, 255, 0.25)',
+                                    strokeLinecap: 'round',
+                                }}
+                            } />
+                            
+                        <span className={styles.text}> 50% </span>
+                    </div>
                     <h5> IELTS Fundamentals </h5>
                     <p> IELTS </p>
                     <p> 250 Words </p>
                 </li>
                 <li>
-                    <div className={styles.progress}></div>
+                    <div className={styles.progress}>
+                        <CircularProgressbar value={10} strokeWidth={7} 
+                            styles={{
+                                path: {
+                                    stroke: 'white',
+                                    strokeLinecap: 'round',
+                                },
+                                trail: {
+                                    stroke: 'rgba(255, 255, 255, 0.25)',
+                                    strokeLinecap: 'round',
+                                }}
+                            } />
+                            
+                        <span className={styles.text}> 10% </span>
+                    </div>
                     <h5> GRE Fundamentals </h5>
                     <p> GRE </p>
                     <p> 456 Words </p>
                 </li>
                 <li>
-                    <div className={styles.progress}></div>
+                    <div className={styles.progress}>
+                        <CircularProgressbar value={25} strokeWidth={7} 
+                            styles={{
+                                path: {
+                                    stroke: 'white',
+                                    strokeLinecap: 'round',
+                                },
+                                trail: {
+                                    stroke: 'rgba(255, 255, 255, 0.25)',
+                                    strokeLinecap: 'round',
+                                }}
+                            } />
+                            
+                        <span className={styles.text}> 25% </span>
+                    </div>
                     <h5> Sapiens </h5>
                     <p> Book </p>
                     <p> 125 Words </p>