Interactive Bar Chart Poll

This code implements an interactive bar chart poll using React, Framer Motion, and a styling solution (likely CSS framework). It allows users to vote for different options, dynamically updating a bar chart to visualize the results. The component consists of three parts: 1. **BarPoll:** This is the main component that renders the entire poll section. It uses `useState` to manage the vote counts for each option. It divides the UI into two sections: `Options` and `Bars`. 2. **Options:** This component displays interactive buttons for each poll option. Each button increments the vote count for the selected option using `handleIncrementVote`, which updates the state via `setVotes`. The update utilizes a functional update pattern (`setVotes((pv) => ...)` ) to ensure correct state updates. The component also displays the total number of votes and a reset button to clear all votes. 3. **Bars:** This component renders the bar chart. It calculates the height of each bar based on the proportion of votes it received and uses Framer Motion's `motion.span` to animate the bar height with a spring effect. The chart dynamically adjusts to the number of options. The code leverages React's state management for interactivity, Framer Motion for smooth animations, and a styling solution (likely a CSS framework) for visual appeal. It's suitable for applications where user engagement and visual data representation are important, such as surveys, feedback forms, or simple opinion polls. For example, it could be used on a website to gauge user preferences on a design feature or to collect feedback on different product options.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Interactive Bar Chart Poll to your project and fits it to your theme.

import BarPoll from "@/components/ui/interactive-bar-chart-poll";

export default function DemoOne() {
  return <BarPoll />;
}