• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• front-entenda-direito-master
  • .eslintignore
  • src
    • App.tsx
    • utils
      • getValidationErrors.ts
    • services
      • api.ts
    • pages
      • ForgotPassword
        • index.tsx
        • styles.ts
      • ResetPassword
        • index.tsx
        • styles.ts
      • Profile
        • index.tsx
        • styles.ts
      • SignIn
        • index.tsx
        • styles.ts
      • SignUp
        • index.tsx
        • styles.ts
      • Dictionary
        • index.tsx
        • styles.ts
        • LegalTerm
          • index.tsx
          • PopularTerm
            • index.tsx
            • styles.ts
      • Search
        • index.tsx
        • styles.ts
        • Process
          • Progress
            • index.tsx
            • styles.ts
          • index.tsx
      • Dashboard
        • index.tsx
        • styles.ts
    • index.tsx
    • hooks
      • auth.tsx
      • toastModal.tsx
      • index.tsx
      • toast.tsx
    • components
      • Input
        • index.tsx
        • styles.ts
      • ToastContainer
        • index.tsx
        • styles.ts
        • Toast
          • index.tsx
          • styles.ts
      • ToastContainerModal
        • index.tsx
        • styles.ts
        • ToastModal
          • index.tsx
          • styles.ts
      • Tooltip
        • index.tsx
        • styles.ts
      • Button
        • index.tsx
        • styles.ts
    • setupTests.ts
    • styles
      • global.ts
    • react-app-env.d.ts
    • routes
      • index.tsx
      • Route.tsx
    • assets
  • tmp
    • .gitkeep
  • public
    • index.html
  • .eslintrc.json
  • LICENSE
  • .editorconfig
  • README.md
  • prettier.config.js
  • package.json
  • tsconfig.json
  • .gitignore

import React from 'react';
import {
  FiAlertCircle,
  FiInfo,
  FiCheckCircle,
  FiXCircle,
} from 'react-icons/fi';

import { ToastMessage, useModal } from '../../../hooks/toastModal';

import { Container } from './styles';

interface ToastModalProps {
  message: ToastMessage;
  style: object;
}

const icons = {
  info: <FiInfo size={24} />,
  success: <FiCheckCircle size={24} />,
  error: <FiAlertCircle size={24} />,
};

const ToastModal: React.FC<ToastModalProps> = ({ message, style }) => {
  const { removeModal } = useModal();

  return (
    <Container
      type={message.type}
      hasdescription={Number(!!message.description)}
      style={style}
    >
      {icons[message.type || 'info']}

      <div>
        <strong>{message.title}</strong>
        {message.description && <p>{message.description}</p>}
      </div>

      <button type="button" onClick={() => removeModal(message.id)}>
        <FiXCircle size={18} />
      </button>
    </Container>
  );
};

export default ToastModal;