3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-07 05:01:49 +02:00
Code Issues Projects Releases Packages Wiki Activity

⬆️ v3.0.0 (#704)

Browse source
This commit is contained in:
Luke Vella 2023-06-19 17:17:00 +01:00 • committed by GitHub
parent 735056f25f
commit c22b3abc4d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
385 changed files with 19912 additions and 5250 deletions
Download patch file Download diff file Expand all files Collapse all files

72
apps/web/src/components/vote-summary-progress-bar.tsx Normal file
View file

@ -0,0 +1,72 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
import { useParticipants } from "@/components/participants-provider";
const ListNames = ({ participantIds }: { participantIds: string[] }) => {
const { participants } = useParticipants();
const participantNameById = participants.reduce<Record<string, string>>(
(acc, curr) => {
acc[curr.id] = curr.name;
return acc;
},
{},
);
return (
<ul>
{participantIds.map((participantId) => (
<li key={participantId}>{participantNameById[participantId]}</li>
))}
</ul>
);
};
export const VoteSummaryProgressBar = (props: {
total: number;
yes: string[];
ifNeedBe: string[];
no: string[];
}) => {
return (
<div className="flex h-1.5 grow overflow-hidden rounded bg-slate-100">
<Tooltip>
<TooltipTrigger asChild>
<div
className="h-full bg-green-500 hover:opacity-75"
style={{
width: (props.yes.length / props.total) * 100 + "%",
}}
/>
</TooltipTrigger>
<TooltipContent side="bottom">
<ListNames participantIds={props.yes} />
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<div
className="h-full bg-amber-400 hover:opacity-75"
style={{
width: (props.ifNeedBe.length / props.total) * 100 + "%",
}}
/>
</TooltipTrigger>
<TooltipContent side="bottom">
<ListNames participantIds={props.ifNeedBe} />
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<div
className="h-full bg-gray-300 hover:opacity-75"
style={{
width: (props.no.length / props.total) * 100 + "%",
}}
/>
</TooltipTrigger>
<TooltipContent side="bottom">
<ListNames participantIds={props.no} />
</TooltipContent>
</Tooltip>
</div>
);
};