76 lines
2.3 KiB
JavaScript
76 lines
2.3 KiB
JavaScript
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'
|
|
|
|
const PartReactions = ({ 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((reactionPart, i) => (
|
|
<li
|
|
className="flex flex-row justify-between p-3 items-center"
|
|
key={`${reactionPart.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={reactionPart.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: reactionPart.user?.userName,
|
|
})}
|
|
>
|
|
{reactionPart.user?.userName}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span>{reactionPart.emote}</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PartReactions
|