feat: update newsletter component

src/components/Newsletter/index.tsx

@@ -9,12 +9,13 @@ enum Text {
 }
 
 function LinkList() {
-  const [text, setText] = useState<Text>(Text.Subscribe)
+  const [loading, setLoading] = useState(false)
+  const [success, setSuccess] = useState(false)
   const submit = useCallback(async (e: FormEvent<HTMLFormElement>) => {
     try {
       const email = e.target.email.value
       const form = new FormData()
-      
+
       e.preventDefault()
       if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
         return
@@ -23,18 +24,31 @@ function LinkList() {
         'data',
         JSON.stringify({ email, table: 'handbook-newsletter' })
       )
-      setText(Text.Subscribing)
+      setLoading(true)
       await fetch('/api/newsletter', {
         method: 'POST',
         body: form
       })
-      setText(Text.Subscribed)
+      setSuccess(true)
+      setLoading(false)
     } catch (error) {
       console.error(error)
-      setText(Text.Subscribe)
+      setLoading(false)
     }
   }, [])
 
+  if (success) {
+    return (
+      <div className={styles.root}>
+        <i className={styles.checkIcon} />
+        <h3>Thank you for subscribing!</h3>
+        <p>
+          You'll receive the latest updates on LLM inference and optimization
+          techniques directly in your inbox.
+        </p>
+      </div>
+    )
+  }
   return (
     <div className={styles.root}>
       <i className={styles.emailIcon} />
@@ -51,11 +65,11 @@ function LinkList() {
         />
         <Button
           arrow={false}
-          disabled={text === Text.Subscribing}
+          disabled={loading}
           type="green"
           buttonType="submit"
         >
-          {text}
+          {loading ? 'Subscribing...' : 'Subscribe'}
         </Button>
       </form>
       <p className={styles.note}>

src/components/Newsletter/styles.module.css

@@ -1,13 +1,21 @@
-.emailIcon {
+.emailIcon,
+.checkIcon {
   display: block;
   width: 1.5rem;
   height: 1.5rem;
-  background-image: url('/img/email.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
 }
 
+.emailIcon {
+  background-image: url('/img/email.svg');
+}
+
+.checkIcon {
+  background-image: url('/img/check.svg');
+}
+
 .root {
   border: 1px solid #dcfce7;
   border-radius: 0.5rem;
@@ -30,26 +38,15 @@
 
 .root p {
   color: #4b5563;
-  margin-bottom: 1rem;
   line-height: 1.4;
-}
-
-.root ul {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 1rem;
-  row-gap: 0.1rem;
-  list-style: none;
   margin: 0;
-  padding: 0;
 }
 
 .root form {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 0.75rem;
+  margin: 1rem 0 0.75rem;
   gap: 0.75rem;
   width: 100%;
 }
@@ -77,6 +74,17 @@
   font-size: 0.875rem;
 }
 
+.root ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  row-gap: 0.1rem;
+  list-style: none;
+  margin: 1rem 0 0;
+  padding: 0;
+}
+
 .root ul li {
   margin: 0;
   display: flex;