updated

frontend/src/components/OptionList.tsx

@@ -0,0 +1,60 @@
+import { PollOption } from '../types/poll.types';
+import { VoteButton } from './VoteButton';
+
+interface OptionListProps {
+  options: PollOption[];
+  onVote: (optionId: string) => void;
+  hasVoted?: (option: PollOption) => boolean;
+}
+
+export function OptionList({ options, onVote, hasVoted }: OptionListProps) {
+  const totalVotes = options.reduce((sum, opt) => sum + opt.votes, 0);
+
+  const sortedOptions = [...options].sort((a, b) => b.votes - a.votes);
+
+  return (
+    <div className="space-y-3">
+      {sortedOptions.length === 0 ? (
+        <div className="text-center py-8 text-white/60">
+          No options yet. Add one to get started!
+        </div>
+      ) : (
+        sortedOptions.map((option) => {
+          const percentage = totalVotes > 0 ? (option.votes / totalVotes) * 100 : 0;
+          const userHasVoted = hasVoted ? hasVoted(option) : false;
+          
+          return (
+            <div
+              key={option.id}
+              className={`bg-white/10 backdrop-blur-sm rounded-lg p-4 border transition-all duration-200 ${
+                userHasVoted 
+                  ? 'border-green-400/50 bg-green-400/10' 
+                  : 'border-white/20 hover:border-white/30'
+              }`}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-white font-medium text-lg">
+                  {option.text}
+                  {userHasVoted && <span className="ml-2 text-green-400 text-sm">✓ Voted</span>}
+                </span>
+                <VoteButton optionId={option.id} votes={option.votes} onVote={onVote} disabled={userHasVoted} />
+              </div>
+              
+              <div className="w-full bg-white/10 rounded-full h-2 overflow-hidden">
+                <div
+                  className="bg-gradient-to-r from-green-400 to-blue-500 h-full transition-all duration-500 ease-out"
+                  style={{ width: `${percentage}%` }}
+                />
+              </div>
+              
+              <div className="mt-2 flex justify-between text-xs text-white/60">
+                <span>by {option.createdBy}</span>
+                <span>{percentage.toFixed(1)}%</span>
+              </div>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}