SentimentInput

sentimentinput-1779394345583.tsx

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

const MOODS = [
  { emoji:'😤', label:'Angry', value:1, color:'#ef4444' },
  { emoji:'😕', label:'Unhappy', value:2, color:'#f97316' },
  { emoji:'😐', label:'Neutral', value:3, color:'#f59e0b' },
  { emoji:'😊', label:'Happy', value:4, color:'#22c55e' },
  { emoji:'🤩', label:'Amazing', value:5, color:'#6d28d9' },
]

export default function SentimentInput({ label = 'How was your experience?' }) {
  const [selected, setSelected] = useState(null)
  const [submitted, setSubmitted] = useState(false)
  if (submitted && selected) {
    const mood = MOODS.find(m=>m.value===selected)
    return (
      <div style={{ textAlign:'center', padding:'20px' }}>
        <div style={{ fontSize:'56px', marginBottom:'12px' }}>{mood.emoji}</div>
        <h3 style={{ color:mood.color, margin:'0 0 4px', fontSize:'18px' }}>Thanks for your feedback!</h3>
        <p style={{ color:'#94a3b8', fontSize:'13px', margin:0 }}>You selected: {mood.label}</p>
        <button onClick={()=>{setSubmitted(false);setSelected(null)}} style={{ marginTop:'16px', background:'none', border:'1px solid #e2e8f0', borderRadius:'8px', padding:'6px 14px', cursor:'pointer', fontSize:'12px', color:'#64748b' }}>Reset</button>
      </div>
    )
  }
  return (
    <div style={{ textAlign:'center' }}>
      <p style={{ fontSize:'15px', fontWeight:600, color:'#374151', marginBottom:'20px' }}>{label}</p>
      <div style={{ display:'flex', gap:'12px', justifyContent:'center', marginBottom:'20px' }}>
        {MOODS.map(mood => (
          <button key={mood.value} onClick={()=>setSelected(mood.value)} style={{
            background:'none', border:'2px solid '+(selected===mood.value?mood.color:'transparent'),
            borderRadius:'14px', padding:'10px', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', gap:'4px',
            transform:selected===mood.value?'scale(1.2)':'scale(1)', transition:'all 0.2s',
            boxShadow:selected===mood.value?'0 4px 15px '+mood.color+'40':'none',
          }}>
            <span style={{ fontSize:'32px' }}>{mood.emoji}</span>
            <span style={{ fontSize:'10px', fontWeight:600, color:selected===mood.value?mood.color:'#94a3b8' }}>{mood.label}</span>
          </button>
        ))}
      </div>
      {selected && (
        <button onClick={()=>setSubmitted(true)} style={{
          background:'#6d28d9', color:'#fff', border:'none', borderRadius:'10px',
          padding:'10px 28px', cursor:'pointer', fontWeight:700, fontSize:'14px',
        }}>Submit</button>
      )}
    </div>
  )
}

Component info

CategoryForms

Frameworkreact

TierFREE

Copies0

About

Emoji-based sentiment/mood picker with animated selection

More from Forms

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

const STEPS = [
  { title: 'Account', fields: ['name', 'email'] },
  { title: 'Profile', fields: ['role', 'company'] },
  { title: 'Confirm', fields: [] },
]

export default function MultiStepForm() {

MultiStepForm

Forms

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

interface FloatingLabelInputProps {
  label?: string
  type?: string
  maxLength?: number
  required?: boolean
  pattern?: string
  helperText?: string
}

export default function FloatingLabelInput({ lab

FloatingLabelInput

Forms

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

export default function SmartFormField() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPass, setShowPass] = useState(false);
  cons

SmartFormField

Forms

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

export default function ToggleSwitch({ label = 'Enable feature', defaultOn = false, disabled = false }) {
  const [on, setOn] = useState(defaultOn)
  return (
    <label style={{
      display: 'inline-f

ToggleSwitch

Forms