FloatingActionButton

FloatingActionButton.tsx

import React, { useState } from 'react';
import './FloatingActionButton.css';

type FloatingActionButtonProps = {
  icon: string;
  onClick: () => void;
}

const FloatingActionButton = (props: FloatingActionButtonProps) => {
  const { icon, onClick } = props;
  const [isOpen, setIsOpen] = useState(false);

  const handleButtonClick = () => {
    setIsOpen(!isOpen);
  }

  const handleClick = () => {
    setIsOpen(false);
    onClick();
  }

  return (
    <div className="floating-action-button-container">
      <button className="floating-action-button-main" onClick={handleButtonClick}>
        <i className={`material-icons ${isOpen ? 'rotate' : ''}`}>{icon}</i>
      </button>
      {isOpen && (
        <div className="floating-action-button-menu">
          <button className="floating-action-button-item" onClick={handleClick}>
            <i className="material-icons">add</i>
          </button>
          <button className="floating-action-button-item" onClick={handleClick}>
            <i className="material-icons">edit</i>
          </button>
          <button className="floating-action-button-item" onClick={handleClick}>
            <i className="material-icons">delete</i>
          </button>
        </div>
      )}
    </div>
  );
};

export default FloatingActionButton;

FloatingActionButton.module.css

.floating-action-button-container {
  position: fixed;
  bottom: 32px;
  right: 32px;
}

.floating-action-button-main {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background-color: #f44336;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  transition: background-color 0.3s ease;
  z-index: 1;
}

.floating-action-button-main:hover {
  background-color: #ff6e60;
  cursor: pointer;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.rotate {
  transform: rotate(45deg);
}

.floating-action-button-menu {
  position: absolute;
  bottom: 72px;
  right: 0;
  display: flex;
  flex-direction: column;
}

.floating-action-button-item {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background-color: #f44336;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  margin-top: 8px;
  transition: background-color 0.3s ease;
}

.floating-action-button-item:hover {
  background-color: #ff6e60;
  cursor: pointer;