EmailComposer

emailcomposer-1779388705817.tsx

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

export default function EmailComposer() {
  const [to, setTo] = useState('');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [sent, setSent] = useState(false);
  const [minimized, setMinimized] = useState(false);

  const fieldStyle = {
    width: '100%', background: 'transparent', border: 'none',
    borderBottom: '1px solid rgba(255,255,255,0.07)',
    color: '#F5F5F0', fontSize: '14px', padding: '12px 0',
    outline: 'none', fontFamily: 'system-ui, sans-serif',
    boxSizing: 'border-box',
  };

  return (
    <div style={{
      fontFamily: 'system-ui, sans-serif',
      width: '380px',
      background: '#161616',
      border: '1px solid rgba(255,255,255,0.1)',
      borderRadius: '16px',
      overflow: 'hidden',
      boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
    }}>
      <div style={{
        background: '#1e1e1e', padding: '12px 16px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        borderBottom: '1px solid rgba(255,255,255,0.07)',
        cursor: 'pointer',
      }} onClick={() => setMinimized(m => !m)}>
        <span style={{ color: '#F5F5F0', fontSize: '13px', fontWeight: 600 }}>New Message</span>
        <div style={{ display: 'flex', gap: '10px' }}>
          <span style={{ color: 'rgba(245,245,240,0.4)', fontSize: '18px' }}>{minimized ? '⊕' : '−'}</span>
          <span style={{ color: 'rgba(245,245,240,0.4)', fontSize: '18px' }}>✕</span>
        </div>
      </div>
      {!minimized && (
        <div style={{ padding: '0 16px' }}>
          <input placeholder="To" value={to} onChange={e => setTo(e.target.value)} style={fieldStyle} />
          <input placeholder="Subject" value={subject} onChange={e => setSubject(e.target.value)} style={fieldStyle} />
          <textarea
            placeholder="Write your message..."
            value={body}
            onChange={e => setBody(e.target.value)}
            rows={5}
            style={{
              ...fieldStyle, borderBottom: 'none',
              resize: 'none', paddingTop: '12px',
              lineHeight: 1.6,
            }}
          />
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '12px 0', borderTop: '1px solid rgba(255,255,255,0.07)',
          }}>
            <div style={{ display: 'flex', gap: '12px', color: 'rgba(245,245,240,0.4)', fontSize: '16px' }}>
              {['B', 'I', 'U', '📎', '🖼️'].map(t => (
                <span key={t} style={{ cursor: 'pointer', fontWeight: t === 'B' ? 900 : 400, fontStyle: t === 'I' ? 'italic' : 'normal' }}
                  onMouseEnter={e => e.currentTarget.style.color = '#C9A84C'}
                  onMouseLeave={e => e.currentTarget.style.color = 'rgba(245,245,240,0.4)'}
                >{t}</span>
              ))}
            </div>
            <button onClick={() => { setSent(true); setTimeout(() => setSent(false), 3000); }} style={{
              background: sent ? 'rgba(74,222,128,0.15)' : 'linear-gradient(135deg, #C9A84C, #e8c96d)',
              border: sent ? '1px solid rgba(74,222,128,0.3)' : 'none',
              borderRadius: '8px', padding: '8px 20px',
              color: sent ? '#4ade80' : '#0A0A0A',
              fontSize: '13px', fontWeight: 700, cursor: 'pointer',
            }}>{sent ? '✓ Sent!' : 'Send'}</button>
          </div>
        </div>
      )}
    </div>
  );
}

Component info

CategoryCommunication

Frameworkreact

TierFREE

Copies0

About

Mini email compose widget with formatting toolbar

More from Communication

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

const PARTICIPANTS = [
  { id: 1, name: 'You', initials: 'ME', color: '#C9A84C', muted: false, camera: true, speaking: true },
  { id: 2, name: 'Sarah Chen', initials: 'SC', color: '#6366f1', muted: fals

VideoCallUI

Communication

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

export default function ChatBubble() {
  const [messages, setMessages] = useState([
    { id: 1, text: 'Hey! The new design looks amazing 🔥', self: false, time: '09:41', reactions: { '👍': 2, '🔥': 1

ChatBubble

Communication

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

export default function TypingIndicator({ users = ["Alice", "Bob"] }) {
  const [visible, setVisible] = useState(true);
  const [dot, setDot] = useState(0);

  useEffect(() => {
    const d

TypingIndicator

Communication