SentimentMeter

sentimentmeter-1779388706095.tsx

'use client';
import { useState } from 'react';

export default function SentimentMeter() {
  const [selected, setSelected] = useState(null);
  const [submitted, setSubmitted] = useState(false);

  const options = [
    { score: 1, emoji: '😡', label: 'Very Unhappy', color: '#ef4444' },
    { score: 2, emoji: '😕', label: 'Unhappy', color: '#f97316' },
    { score: 3, emoji: '😐', label: 'Neutral', color: '#eab308' },
    { score: 4, emoji: '😊', label: 'Happy', color: '#84cc16' },
    { score: 5, emoji: '😍', label: 'Very Happy', color: '#4ade80' },
  ];

  const getBarColor = () => {
    if (!selected) return 'rgba(255,255,255,0.1)';
    return options.find(o => o.score === selected)?.color || '#C9A84C';
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '380px', textAlign: 'center' }}>
      <p style={{ color: 'rgba(245,245,240,0.6)', fontSize: '13px', margin: '0 0 8px 0' }}>How are you feeling today?</p>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 24px 0', fontSize: '18px', fontWeight: 700 }}>Rate your experience</h3>
      {!submitted ? (
        <>
          <div style={{ display: 'flex', justifyContent: 'center', gap: '12px', marginBottom: '20px' }}>
            {options.map(o => (
              <button key={o.score} onClick={() => setSelected(o.score)} style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: '8px',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '6px',
              }}>
                <span style={{
                  fontSize: '36px',
                  transform: selected === o.score ? 'scale(1.3)' : 'scale(1)',
                  transition: 'transform 0.2s ease',
                  filter: selected === o.score ? 'none' : selected ? 'grayscale(0.7) opacity(0.4)' : 'none',
                  display: 'block',
                }}>{o.emoji}</span>
                {selected === o.score && <span style={{ color: o.color, fontSize: '11px', fontWeight: 600 }}>{o.label}</span>}
              </button>
            ))}
          </div>
          <div style={{ height: '4px', background: 'rgba(255,255,255,0.06)', borderRadius: '2px', marginBottom: '20px', overflow: 'hidden' }}>
            <div style={{
              height: '100%', borderRadius: '2px',
              background: getBarColor(),
              width: selected ? `${(selected / 5) * 100}%` : '0%',
              transition: 'all 0.4s ease',
            }} />
          </div>
          <button
            onClick={() => selected && setSubmitted(true)}
            disabled={!selected}
            style={{
              background: selected ? 'linear-gradient(135deg, #C9A84C, #e8c96d)' : 'rgba(255,255,255,0.05)',
              border: 'none', borderRadius: '10px', padding: '11px 32px',
              color: selected ? '#0A0A0A' : 'rgba(245,245,240,0.3)',
              fontSize: '14px', fontWeight: 700, cursor: selected ? 'pointer' : 'default',
            }}
          >Submit Feedback</button>
        </>
      ) : (
        <div style={{ padding: '32px 0' }}>
          <div style={{ fontSize: '48px', marginBottom: '16px' }}>
            {options.find(o => o.score === selected)?.emoji}
          </div>
          <h3 style={{ color: '#F5F5F0', margin: '0 0 8px 0' }}>Thank you!</h3>
          <p style={{ color: 'rgba(245,245,240,0.5)', margin: 0, fontSize: '14px' }}>Your feedback helps us improve.</p>
        </div>
      )}
    </div>
  );
}

Component info

CategoryFeedback

Frameworkreact

TierFREE

Copies0

About

User sentiment analysis meter with emoji scale

More from Feedback

'use client'
import { useState } from 'react'

const REASONS: Record<string, string[]> = {
  low: ['Too expensive', 'Hard to find components', 'Quality issues', 'Missing components', 'Poor documentation'],
  mid: ['Good but missing features', 'Would

NPSWidget

Feedback

'use client'
import { useState } from 'react'

export default function RatingWidget() {
  const [hovered, setHovered] = useState(0)
  const [selected, setSelected] = useState(0)
  const [submitted, setSubmitted] = useState(false)
  const [feedback, s

RatingWidget

Feedback