Precise error messages (#150)

* Introduce a component to display error messages * precise error message when api key is invalid
2023-03-25 17:32:59 +01:00
parent 3f09a4c355
commit b89ca2082e
5 changed files with 59 additions and 15 deletions
@@ -0,0 +1,17 @@
+import { ErrorMessage } from "@/types";
+import { FC } from "react";
+
+interface Props {
+    error: ErrorMessage
+}
+
+export const ErrorMessageDiv: FC<Props> = ({ error }) => {
+    return (
+        <div className= "flex flex-col justify-center mx-auto h-full w-[300px] sm:w-[500px] space-y-6" >
+            <div className="text-center text-red-500" >{error.title} {error.code ? <i>({error.code}) </i> : "" }</div >
+            { error.messageLines.map((line, index) => (
+                <div key={index} className="text-center text-red-500" > {line} </div>
+            )) }
+        </div>
+  );
+};