refactor: extract Notice to component

frontend/components/Notice.tsx

@@ -0,0 +1,56 @@
+import { ReactNode } from "react";
+import { ButtonStyle } from "./Button";
+
+export type NoticeStyle = ButtonStyle;
+
+export interface Props {
+  header?: string;
+  style?: NoticeStyle;
+  children?: ReactNode;
+}
+
+export default function Notice(props: Props) {
+  if (props.style === undefined) {
+    return PrimaryNotice(props);
+  }
+
+  switch (props.style) {
+    case ButtonStyle.primary:
+      return PrimaryNotice(props);
+    case ButtonStyle.success:
+      return SuccessNotice(props);
+    case ButtonStyle.danger:
+      return DangerNotice(props);
+  }
+}
+
+function PrimaryNotice(props: Props) {
+  return (
+    <div className="bg-blue-500 p-4 rounded-md border-blue-600 text-white">
+      {props.children}
+    </div>
+  );
+}
+
+function SuccessNotice(props: Props) {
+  return (
+    <div className="bg-green-600 dark:bg-green-700 p-4 rounded-md text-white border-green-700 dark:border-green-800">
+      {props.children}
+    </div>
+  );
+}
+
+function DangerNotice(props: Props) {
+  return (
+    <div className="bg-red-600 dark:bg-red-700 rounded-md text-red-50 border-red-700 dark:border-red-800 max-w-lg">
+      {props.header && (
+        <h3 className="uppercase text-sm font-bold border-b border-red-700 dark:border-red-800 px-4 py-3">
+          {props.header}
+        </h3>
+      )}
+      <div className={props.header ? "px-4 pt-3 pb-4" : "p-4"}>
+        {props.children}
+      </div>
+    </div>
+  );
+}

frontend/pages/login/discord.tsx

@@ -8,6 +8,7 @@ import TextInput from "../../components/TextInput";
 import Loading from "../../components/Loading";
 import { stat } from "fs";
 import Button, { ButtonStyle } from "../../components/Button";
+import Notice from "../../components/Notice";
 
 interface CallbackResponse {
   has_account: boolean;
@@ -97,12 +98,12 @@ export default function Discord() {
 
   if (!state.ticket && !state.error) {
     return <Loading />;
-  } else if (state.error) {
+  } else if (!state.ticket && state.error) {
     return (
-      <div className="bg-red-600 dark:bg-red-700 p-2 rounded-md">
+      <Notice style={ButtonStyle.danger} header="Login error">
-        <p>Error: {state.error.message ?? state.error}</p>
+        <p>{state.error.message ?? state.error}</p>
         <p>Try again?</p>
-      </div>
+      </Notice>
     );
   }
 
@@ -137,10 +138,10 @@ export default function Discord() {
       </p>
 
       {state.error && (
-        <div className="bg-red-600 dark:bg-red-700 p-2 rounded-md">
+        <Notice style={ButtonStyle.danger} header="Create account error">
-          <p>Error: {state.error.message ?? state.error}</p>
+          <p>{state.error.message ?? state.error}</p>
           <p>Try again?</p>
-        </div>
+        </Notice>
       )}
 
       <label>