| 1 | "use client"; |
| 2 | |
| 3 | import { PARAMS_USER_ID } from '@/lib/params'; |
| 4 | import Image from "next/image"; |
| 5 | import Link from "next/link"; |
| 6 | import { VoteType } from "./votes-view-main"; |
| 7 | import { SongProviderVote } from '@/models/song-votes-detail-response'; |
| 8 | |
| 9 | export function VoterGravatarsViews(props: { |
| 10 | voters: SongProviderVote[]; |
| 11 | type: VoteType; |
| 12 | }) { |
| 13 | const className = |
| 14 | props.type === VoteType.DOWN ? "justify-end" : "justify-start"; |
| 15 | return ( |
| 16 | <div className={className}> |
| 17 | <div className="flex -space-x-2 overflow-hidden"> |
| 18 | {props.voters.map((x, i) => { |
| 19 | return ( |
| 20 | <Link href={`/profile?${PARAMS_USER_ID}=${x.user_id}`} key={i}> |
| 21 | <Image |
| 22 | src={x.voter_gravatar} |
| 23 | width={24} |
| 24 | height={24} |
| 25 | className="inline-block h-8 w-8 rounded-full ring-2 ring-white" |
| 26 | alt={x.voter_username_or_id} |
| 27 | /> |
| 28 | </Link> |
| 29 | ); |
| 30 | })} |
| 31 | </div> |
| 32 | </div> |
| 33 | ); |
| 34 | } |