buttons.floatingActionButton.title

import React, { useState } from 'react';

export const FloatingActionButton: React.FC = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="fab-container">
      <div className={`fab-menu ${isExpanded ? 'fab-menu-expanded' : ''}`}>
        {isExpanded && (
          <>
            <button className="fab-menu-item">✏️</button>
            <button className="fab-menu-item">📤</button>
            <button className="fab-menu-item">🗑️</button>
          </>
        )}
      </div>
      <button
        className="fab-button"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        {isExpanded ? '×' : '+'}
      </button>
    </div>
  );
};

.fab-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  transition: all 0.3s ease;
}

.fab-button:hover {
  transform: scale(1.1);
}