From f5078b814ef2a43fb18a965fb4c6c16ea565abc8 Mon Sep 17 00:00:00 2001
From: minhd-vu <minhd_vu@yahoo.com>
Date: Tue, 27 Feb 2024 18:39:21 -0500
Subject: [PATCH] improves alerts ui closes #49

---
 components/Alert.tsx | 50 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/components/Alert.tsx b/components/Alert.tsx
index 1bafb49..a78fcac 100644
--- a/components/Alert.tsx
+++ b/components/Alert.tsx
@@ -1,6 +1,15 @@
-export default function Alert({ children }: { children: React.ReactNode }) {
+import { ReactNode, useContext } from "react";
+import { ErrorContext } from "./App";
+
+export default function Alert({ children }: { children: ReactNode }) {
+  const { setError } = useContext(ErrorContext);
+
+  function onClick() {
+    setError(undefined);
+  }
+
   return (
-    <div role="alert" className="alert alert-error">
+    <div role="alert" className="alert alert-error text-sm py-2">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="stroke-current shrink-0 h-6 w-6"
@@ -11,10 +20,43 @@ export default function Alert({ children }: { children: React.ReactNode }) {
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeWidth="2"
-          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
         />
       </svg>
-      <span>{children}</span>
+      <span>{toSentence(children)}</span>
+      <button
+        className="btn btn-square btn-xs btn-ghost"
+        onClick={() => onClick()}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="stroke-current shrink-0 h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
     </div>
   );
 }
+
+function toSentence(children: ReactNode) {
+  if (!children) {
+    return;
+  }
+
+  let text = children.toString().trim();
+  text = text.charAt(0).toUpperCase() + text.slice(1);
+  if (text.charAt(text.length - 1) !== ".") {
+    text += ".";
+  }
+
+  return text;
+}