let people close the admonition

Author: itsneufox

frontend/src/pages/index.module.css

@@ -10,13 +10,52 @@
   margin-bottom: 100px;
 }
 
-.announcement {
+.announcementWrapper {
+  position: relative;
   max-width: 900px;
   width: 100%;
   margin-bottom: 4rem;
+}
+
+.announcement {
+  max-width: 900px;
+  width: 100%;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   animation: slideDown 0.6s ease-out;
+  position: relative;
+  padding-bottom: 2rem;
+}
+
+.dismissContainer {
+  position: absolute;
+  bottom: 12px;
+  right: 16px;
+}
+
+.dismissButton {
+  background: none;
+  border: none;
+  color: var(--ifm-color-primary-darker);
+  font-size: 0.85rem;
+  font-family: inherit;
+  padding: 4px 8px;
+  cursor: pointer;
+  text-decoration: underline;
+  transition: color 0.2s ease;
+  font-weight: 500;
+  margin: 0;
+  line-height: normal;
+}
+
+.dismissButton:hover {
+  color: var(--ifm-color-primary-darkest);
+}
+
+.dismissButton:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(144, 131, 210, 0.3);
+  border-radius: 4px;
 }
 
 .enhancedLink {
@@ -162,27 +201,27 @@
     padding: 4rem 1.5rem 0;
     margin-bottom: 80px;
   }
-  
+ 
   .heroContent {
     flex-direction: column;
     text-align: center;
     gap: 3rem;
   }
-  
+ 
   .heroText {
     align-items: center;
     text-align: center;
     max-width: 100%;
   }
-  
+ 
   .heroTitle {
     font-size: 3rem;
   }
-  
+ 
   .button {
     width: 100%;
   }
-  
+ 
   .heroButtons {
     width: 100%;
     max-width: 350px;
@@ -194,24 +233,33 @@
     padding: 3rem 1rem 0;
     margin-bottom: 60px;
   }
-  
+ 
   .heroTitle {
     font-size: 2.5rem;
   }
-  
+ 
   .heroDescription {
     font-size: 1.25rem;
   }
-  
+ 
   .socialLinks {
     grid-template-columns: repeat(3, 1fr); /* 3 columns on mobile so we can avoid the icons making a line break*/
     max-width: 300px;
     gap: 1rem;
   }
-  
+ 
   .socialLink {
     width: 60px;
     height: 60px;
     margin: 0 auto;
   }
+  
+  .dismissContainer {
+    bottom: 8px;
+    right: 12px;
+  }
+  
+  .dismissButton {
+    font-size: 0.8rem;
+  }
 }

frontend/src/pages/index.tsx

@@ -4,6 +4,7 @@ import Heading from "@theme/Heading";
 import Layout from "@theme/Layout";
 import Image from "@theme/ThemedImage";
 import clsx from "clsx";
+import { useState } from "react";
 
 import Admonition from "../components/Admonition";
 import styles from "./index.module.css";
@@ -47,69 +48,87 @@ const socials = [
   },
 ];
 
+const SocialIcons = () => {
+  return (
+    <div className={styles.socialLinks}>
+      {socials.map((social, index) => (
+        <a 
+          key={index} 
+          href={social.href} 
+          className={styles.socialLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={social.alt}
+        >
+          <Image
+            sources={{ 
+              light: social.src, 
+              dark: social.src 
+            }}
+            alt={social.alt}
+            width={social.size}
+            height={social.size}
+            className={styles.socialIcon}
+          />
+        </a>
+      ))}
+    </div>
+  );
+};
+
 const HomepageHeader = () => {
+  const [showAnnouncement, setShowAnnouncement] = useState(true);
 
-  const SocialIcons = () => {
-    return (
-      <div className={styles.socialLinks}>
-        {socials.map((social, index) => (
-          <a 
-            key={index} 
-            href={social.href} 
-            className={styles.socialLink}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={social.alt}
-          >
-            <Image
-              sources={{ 
-                light: social.src, 
-                dark: social.src 
-              }}
-              alt={social.alt}
-              width={social.size}
-              height={social.size}
-              className={styles.socialIcon}
-            />
-          </a>
-        ))}
-      </div>
-    );
+  const closeAnnouncement = () => {
+    setShowAnnouncement(false);
   };
 
   return (
     <header className={styles.heroBanner}>
 
-      <Admonition
-        className={styles.announcement}
-        type="tip"
-        title="A new version of open.mp server and launcher is out now!"
-      >
-        Version <b>1.4.0.2779</b> of open.mp server is out with many fixes,
-        performance boosts, and new features!{" "}
-        <Link 
-          to="https://www.open.mp/docs/changelog" 
-          className={styles.enhancedLink}
-        >
-          Changelog
-        </Link> |{" "}
-        <Link 
-          to="https://github.com/openmultiplayer/open.mp/releases/latest"
-          className={styles.enhancedLink}
-        >
-          Download
-        </Link>
-        .
-        <br />
-        The launcher also got an update!{" "}
-        <Link 
-          to="https://github.com/openmultiplayer/launcher/releases/latest"
-          className={styles.enhancedLink}
-        >
-          See what's new
-        </Link>
-        .
-      </Admonition>
+      {showAnnouncement && (
+        <div className={styles.announcementWrapper}>
+          <Admonition
+            className={styles.announcement}
+            type="tip"
+            title="A new version of open.mp server and launcher is out now!"
+          >
+            Version <b>1.4.0.2779</b> of open.mp server is out with many fixes,
+            performance boosts, and new features!{" "}
+            <Link 
+              to="https://www.open.mp/docs/changelog" 
+              className={styles.enhancedLink}
+            >
+              Changelog
+            </Link> |{" "}
+            <Link 
+              to="https://github.com/openmultiplayer/open.mp/releases/latest"
+              className={styles.enhancedLink}
+            >
+              Download
+            </Link>
+            .
+            <br />
+            The launcher also got an update!{" "}
+            <Link 
+              to="https://github.com/openmultiplayer/launcher/releases/latest"
+              className={styles.enhancedLink}
+            >
+              See what's new
+            </Link>
+            .
+            <div className={styles.dismissContainer}>
+              <button 
+                onClick={closeAnnouncement} 
+                className={styles.dismissButton}
+                aria-label="Dismiss announcement"
+              >
+                Dismiss this message
+              </button>
+            </div>
+          </Admonition>
+        </div>
+      )}
 
       <div className={styles.heroContent}>
         <div className={styles.heroText}>