[Update] Starting Up: Add announcements button to starting up display. temporarily tho

src-ui/app/splash_component/SplashComponent.jsx

@@ -1,12 +1,41 @@
+import { useState, useEffect } from "react";
 import styles from "./SplashComponent.module.scss";
 import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer/";
 import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
+import MegaphoneSvg from "@images/megaphone.svg?react";
 
 export const SplashComponent = () => {
     return (
         <div>
             <StartUpProgressContainer />
             <DownloadModelsContainer />
+            <AnnouncementsContainer />
         </div>
     );
-};
+};
+
+const AnnouncementsContainer = () => {
+    const labels = ["VRCT Real-Time Announcements", "VRCTからのお知らせ"];
+    const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
+
+
+    useEffect(() => {
+        const labelInterval = setInterval(() => {
+            setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length);
+        }, 6000);
+        return () => clearInterval(labelInterval);
+    }, [labels.length]);
+
+    return (
+        <a
+            href="https://docs.google.com/spreadsheets/d/1_L5i-1U6PB1dnaPPTE_5uKMfqOpkLziPyRkiMLi4mqU/edit?usp=sharing"
+            target="_blank"
+            rel="noreferrer"
+        >
+            <button className={styles.announcements_button}>
+                <MegaphoneSvg className={styles.announcements_link_svg} />
+                <p className={styles.announcements_label}>{labels[currentLabelIndex]}</p>
+            </button>
+        </a>
+    );
+};

src-ui/app/splash_component/SplashComponent.module.scss

@@ -1,8 +1,26 @@
-.progress_container {
-    position: relative;
-}
-.progress_label {
+.announcements_button {
     position: absolute;
-    font-size: 1rem;
-    color: var(--dark_basic_text_color);
+    top: 16px;
+    left: 20px;
+    border: 1px solid var(--dark_600_color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 4px;
+    &:hover {
+        background-color: var(--dark_750_color);
+    }
+    &:active {
+        background-color: var(--dark_850_color);
+    }
+    transition: all 0.1s ease;
+}
+
+.announcements_label {
+    font-size: 12px;
+}
+.announcements_link_svg {
+    width: 20px;
 }