forked from quic-issues/427e7578-d7bf-49c8-aee9-2dd999e25316
feat: implement dynamic P2P polling app with real-time synchronization
- 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
This commit is contained in:
25
frontend/src/components/VoteButton.tsx
Normal file
25
frontend/src/components/VoteButton.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user