anamnesis/src/components/home/Home.tsx

import React from "react";
import styles from './Home.module.scss';
import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg';
import { ReactComponent as SearchIcon } from '../../assets/icons/bx-search-alt.svg';
import { ReactComponent as BookIcon } from '../../assets/icons/readme.svg';
import { ReactComponent as BookMarkIcon } from '../../assets/icons/bookmark.svg';
import { ReactComponent as BookShelfIcon } from '../../assets/icons/bookshelf.svg';
import { ReactComponent as CalendarIcon } from '../../assets/icons/bx-calendar.svg';
import { ReactComponent as TimeIcon } from '../../assets/icons/time.svg';
import { ReactComponent as ActivityIcon } from '../../assets/icons/activity.svg';
import { ReactComponent as CheckCircleIcon } from '../../assets/icons/check-circle.svg';
import { ReactComponent as ExpandIcon } from '../../assets/icons/expand.svg';
import { ReactComponent as PlusIcon } from '../../assets/icons/plus.svg';
import { ReactComponent as GridIcon } from '../../assets/icons/circled.svg';
import { ReactComponent as PersonSpeakerIcon } from '../../assets/icons/user-speaker.svg';
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 className="page">

        <header className={styles.pageHeader}>
            <LogoIcon />
        </header>

        <section className={styles.upfold}>
            <div className={styles.profileImage}>
                {/* eslint-disable-next-line */}
                <CircularProgressbar value={70} strokeWidth={4} 
                    styles={{
                        path: {
                            stroke: '#d45b63',
                            strokeLinecap: 'round',
                        },
                        trail: {
                            stroke: 'rgba(255, 255, 255, 0)',
                            strokeLinecap: 'round',
                        }}
                    } />
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERA5Pm3aRBV7AaI8tvpZfzpD24ZgrU1_8NA&usqp=CAU" alt="profile-image" />
                <InternBadge />
            </div>
            <div className={styles.userDetails}>
                <h2> Neymar Junior </h2>
                <div className={styles.stat}>
                    <h5> 1.2K </h5>
                    <label> Words </label>
                </div>
                <div className={styles.stat}>
                    <h5> 10 </h5>
                    <label> Shelves </label>
                </div>
            </div>
        </section>

        <div className={styles.searchBar}>
            <input type="text" placeholder={'Search and add a word'} />
            <SearchIcon />
        </div>

        <section className={styles.List}>
            <header className={styles.blockHeader}>
                <h4>
                    <BookIcon />
                    Revisions
                </h4>
                <button>
                    <CalendarIcon />
                </button>
            </header>
            <ul>
                <li>
                    <div className={styles.icon}>
                        <TimeIcon />
                    </div>
                    <div className={styles.info}>
                        <label> Upcoming </label>
                        <span> 5 Words </span>
                    </div>
                </li>
                <li>
                    <div className={styles.icon}>
                        <ActivityIcon />
                    </div>
                    <div className={styles.info}>
                        <label> Active </label>
                        <span> 1 Word </span>
                    </div>
                </li>
                <li>
                    <div className={styles.icon}>
                        <CheckCircleIcon />
                    </div>
                    <div className={styles.info}>
                        <label> Completed </label>
                        <span> 18 Words </span>
                    </div>
                </li>
            </ul>
        </section>

        <section className={styles.Shelf}>
            <header className={styles.blockHeader}>
                <h4>
                    <BookShelfIcon />
                    Active Shelves
                </h4>
                <button className={styles.expandButton}>
                    <ExpandIcon />
                </button>
                <button>
                    <PlusIcon />
                </button>
            </header>
            <ul>
                <li>
                    <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}>
                        <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}>
                        <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}>
                        <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>
                </li>
            </ul>
        </section>

        <section className={styles.Grid}>
            <header className={styles.blockHeader}>
                <h4>
                    <GridIcon />
                    Categories
                </h4>
                <button className={styles.expandButton}>
                    <ExpandIcon />
                </button>
                <button>
                    <PlusIcon />
                </button>
            </header>
            <ul>
                <li>
                    <div className={styles.icon}>
                        <TimeIcon />
                    </div>
                    <div className={styles.info}>
                        <label> Vocabulary </label>
                        <span> 5 Shelves </span>
                    </div>
                </li>
                <li>
                    <div className={styles.icon}>
                        <BookMarkIcon />
                    </div>
                    <div className={styles.info}>
                        <label> Books </label>
                        <span> 3 Shelves </span>
                    </div>                    
                </li>
                <li>
                    <div className={styles.icon}>
                        <PersonSpeakerIcon />
                    </div>
                    <div className={styles.info}>
                        <label> IELTS </label>
                        <span> 5 Shelves </span>
                    </div>                    
                </li>
                <li>
                    <div className={styles.icon}>
                        <BrainIcon />
                    </div>
                    <div className={styles.info}>
                        <label> GRE </label>
                        <span> 2 Shelves </span>
                    </div>                    
                </li>
            </ul>
        </section>

    </section>
}