forked from quic-issues/427e7578-d7bf-49c8-aee9-2dd999e25316
akinwumisehinde
e14bb6d425
- Add complete P2P polling application with React + TypeScript frontend - Implement Node.js backend with Yjs WebSocket and WebRTC signaling - Support dynamic poll creation, answer management, and voting - Add CRDT-based state synchronization using Yjs for conflict-free merging - Implement user tracking and vote prevention (one vote per user per option) - Create modern UI with Tailwind CSS and visual feedback - Add comprehensive documentation and setup instructions Features: - Users can create polls with custom questions - Anyone can add answer options to any poll - Real-time voting with instant cross-client synchronization - Smart vote tracking with visual feedback for voted options - User attribution showing who created polls and options - Connection status indicators for WebSocket and P2P connections Technical: - Hybrid P2P architecture (WebSocket + WebRTC) - CRDT-based state management with Yjs
26 lines
703 B
TypeScript
26 lines
703 B
TypeScript
import { ThumbsUp } from 'lucide-react';
|
|
|
|
interface VoteButtonProps {
|
|
optionId: string;
|
|
votes: number;
|
|
onVote: (optionId: string) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
export function VoteButton({ optionId, votes, onVote, disabled = false }: VoteButtonProps) {
|
|
return (
|
|
<button
|
|
onClick={() => !disabled && onVote(optionId)}
|
|
disabled={disabled}
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 text-white font-medium ${
|
|
disabled
|
|
? 'bg-white/10 cursor-not-allowed opacity-60'
|
|
: 'bg-white/20 hover:bg-white/30'
|
|
}`}
|
|
>
|
|
<ThumbsUp className="w-4 h-4" />
|
|
<span>{votes}</span>
|
|
</button>
|
|
);
|
|
}
|