• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• Github-Profile-README-master
  • .github
    • workflows
      • firebaseDeploy.yml
  • src
    • containers
      • MainContainer.js
      • WallContainer.js
    • dataSet
      • githubCards
        • shubhamdsm.md
        • mohammadanang.md
        • someshwarMirge.md
        • fatik07.md
        • akapattnaik.md
        • srinibasbiswal.md
        • swarajlaha.md
        • KonradLinkowski.md
        • aryan-chawla.md
        • gabirlima.md
        • kumaranshu72.md
        • vansh1067.md
        • prathimacode-hub.md
        • vivek32ta.md
        • ankitabasera.md
        • dedesaepulloh.md
        • shin-iji.md
        • pradhyumvyas.md
        • caroline-rodrigues.md
        • Aayushi-Mittal.md
        • komalswami.md
        • tanut2539.md
        • ankitaugale23.md
        • Vrindagupta6828.md
        • DriftingShadows.md
        • aniruddhparwal.md
        • pritam047.md
        • mohprilaksono.md
        • lucasguiss.md
        • Nithin005.md
        • meghasharma123.md
        • Kanadets.md
        • tmw9.md
        • MThakkar121.md
        • Erikadarisman.md
        • iagormoraes.md
        • itzmeowww.md
        • fakhrulzulfi.md
        • vj-abishek.md
        • leonardomath.md
        • kdimas12.md
        • mandy6720.md
        • vyasriday.md
        • abhijitparida.md
        • Harshita248.md
        • ayushmaloo.md
        • aniketsingh98571.md
        • python1neo.md
        • sabicd.md
        • gsiradze.md
        • aecuto.md
        • Abhijith126.md
        • manishakanyal.md
        • vishalpattnaik.md
        • sonilaia.md
        • gitapin82y.md
        • immayurpanchal.md
      • users.js
    • components
      • ProfileCardComponent.js
      • HeaderComponent.js
    • App.js
    • App.test.js
    • App.css
    • serviceWorker.js
    • index.css
    • setupTests.js
    • stylesheets
      • style.module.css
    • index.js
  • public
    • robots.txt
    • manifest.json
    • index.html
    • site.webmanifest
  • LICENSE
  • firebase.json
  • .firebaserc
  • README.md
  • package.json
  • .gitignore

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react'
import MDEditor from '@uiw/react-md-editor';
import styles from '../stylesheets/style.module.css';
import { faGithub } from '@fortawesome/free-brands-svg-icons'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';


function ProfileCardComponent(props){

    const [currentComponent, setCurrentComponent] = useState('MarkDownDesign');

    const switchDesign = () =>{
        if (currentComponent === 'MarkDownDesign'){
            setCurrentComponent('MarkDownCode');
        }else if (currentComponent === 'MarkDownCode'){
            setCurrentComponent('MarkDownDesign');
        }
    }

    return(
        <React.Fragment>
            <div className={styles.ProfileCard}>
                <div className={styles.CardHeader}>
                    <div className={styles.chipLeft}>
                        <a className={styles.icon} href={`https://github.com/${props.profileDetails.githubUserName}`} rel="noopener noreferrer" target="_blank">
                            <div className={styles.icon__github}>
                                <FontAwesomeIcon name="search" icon={faGithub}></FontAwesomeIcon>
                            </div>
                        </a>
                        <h3>{props.profileDetails.githubUserName}</h3>
                    </div>
                    <div className={styles.chipRight}>
                        <h3>Show Code</h3>
                        <div className={styles.switch}>                    
                            <div className={styles.switch__toggle}>
                                <input id={props.index} type="checkbox"  onClick={switchDesign}/>
                                <label htmlFor={props.index}></label>
                            </div>
                        </div>
                    </div>    
                </div>  
            { 
                (currentComponent === 'MarkDownDesign') 
                ?  <MDEditor.Markdown source={props.markDown} />
                : <SyntaxHighlighter language="markdown" style={darcula}>
                    {props.markDown}
                    </SyntaxHighlighter>
            }
        </div>
        

        </React.Fragment>
        
    )

}

export default ProfileCardComponent;