import { useState } from 'react' ; import Tab from '@material-ui/core/Tab' ; import Tabs from '@material-ui/core/Tabs' ; import { Link , routes } from '@redwoodjs/router' ; import { countEmotes } from 'src/helpers/emote' ; import ImageUploader from 'src/components/ImageUploader/ImageUploader' ; const ProjectReactions = ( { reactions } ) => { const emotes = countEmotes ( reactions ) ; const [ tab , setTab ] = useState ( 0 ) ; const onTabChange = ( _ , newValue ) => { setTab ( newValue ) ; } ; return ( < div className = "bg-gray-100 p-4 min-h-md rounded-lg shadow-lg" > < Tabs value = { tab } onChange = { onTabChange } variant = "scrollable" scrollButtons = "off" textColor = "primary" indicatorColor = "primary" > < Tab label = "All" style = { { minWidth : 100 } } /> { emotes . map ( ( emote , i ) => ( < Tab label = { `${ emote . emoji } ${ emote . count }` } key = { `${ emote . emoji }-${ i }}` } style = { { minWidth : 100 } } />))} < /Tabs> < ul > { reactions . filter ( ( reaction ) => tab === 0 ? true : reaction . emote === emotes [ tab - 1 ] . emoji ) . map ( ( reactionProject , i ) => ( < li className = "flex flex-row justify-between p-3 items-center" key = { `${ reactionProject . emote }-${ i }}` } > < div className = "flex items-center justify-center" > < div className = "w-8 h-8 overflow-hidden rounded-full border border-indigo-300 shadow flex-shrink-0" > < ImageUploader className = "" aspectRatio = { 1 } imageUrl = { reactionProject . user ?. image } width = { 50 } / > < /div> < div className = "ml-4 font-roboto" > < div className = "text-gray-800 font-normal text-md mb-1" > < Link to = { routes . user ( { userName : reactionProject . user ?. userName , } ) } > { reactionProject . user ?. userName } < /Link> < /div> < /div> < /div> < div > < span > { reactionProject . emote } < /span> < /div> < /li>))} < /ul> < /div>); } ; export default ProjectReactions ;