/**
 * MainButtons component.
 */ import React from 'react' ; import { createUseStyles } from 'react-jss' ; import { IconProp } from '@fortawesome/fontawesome-svg-core' ; import ButtonLink from '../../../../components/ButtonLink' ; import GHButton , { GHButtonProps } from '../../../../components/GHButton' ; import { ContactItem } from '../../../../models' ; import { getGHCredentials } from '../../../../utils' ; import styles from './styles' ; const useStyles = createUseStyles ( styles ) ; export interface MainButtonsProps { contactData : ContactItem [ ] ; repoUrl : string ; } const MainButtons = ( { contactData , repoUrl } ) => { const classes = useStyles ( ) ; const { repo , username } = getGHCredentials ( repoUrl ) ; const ghButtons = [ { resource : { endpoint : `https://api.github.com/users/${ username }` , attr : 'followers' , } , href : `https://github.com/${ username }` , title : `Follow @${ username } on GitHub` , icon : [ 'fab' , 'github' ] , size : 'lg' , text : `Follow @${ username }` , } , { resource : { endpoint : `https://api.github.com/repos/${ username }/${ repo }` , attr : 'stargazers_count' , } , href : repoUrl , title : `Star ${ username }/${ repo } on GitHub` , icon : 'star' , size : 'sm' , text : 'Star' , } , ] ; const mainContact = contactData . find ( ( c ) => c . isMain ) as ContactItem ; return ( < div className = { classes . root } > < div > { ghButtons . map ( ( btn ) => ( < GHButton key = { `gh-btn-${ btn . resource . attr }` } { ... btn } />))} < /div> < div > < ButtonLink href = { mainContact . url } title = { `Find me on ${ mainContact . name }` } icon = { mainContact . icon as IconProp } size = "lg" text = "Contact Me" / > < /div> < /div>); } ; export default MainButtons ;