/ packages / frontend / src / components / common / ErrorMessage.tsx
ErrorMessage.tsx
 1  // SPDX-FileCopyrightText: 2024 Mass Labs
 2  //
 3  // SPDX-License-Identifier: GPL-3.0-or-later
 4  
 5  interface ErrorMessageProps {
 6    errorMessage: string | null;
 7    onClose: () => void;
 8  }
 9  
10  export default function ErrorMessage({
11    errorMessage,
12    onClose,
13  }: ErrorMessageProps) {
14    if (!errorMessage) return null;
15  
16    return (
17      <div
18        className="mt-2 px-4 py-2 bg-error-red text-white font-thin rounded-lg flex items-center"
19        data-testid="error-message"
20      >
21        <p>{errorMessage}</p>
22        <button
23          type="button"
24          onClick={() => onClose()}
25          className="ml-auto"
26          style={{ backgroundColor: "transparent", padding: 0 }}
27        >
28          <div className="bg-white rounded-full w-4 h-4 flex justify-center items-center">
29            <img
30              src="/icons/close-icon.svg"
31              alt="close-icon"
32              width={8}
33              height={8}
34              className="w-2 h-2"
35            />
36          </div>
37        </button>
38      </div>
39    );
40  }