[Refactor] Move to src-ui/views and src-ui/logics structure.

src-ui/views/app/others/splash_component/SplashComponent.jsx

@@ -0,0 +1,85 @@
+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";
+import XMarkSvg from "@images/cancel.svg?react";
+import { useWindow } from "@logics_common";
+import clsx from "clsx";
+
+export const SplashComponent = () => {
+    return (
+        <div className={styles.container}>
+            <StartUpProgressContainer />
+            <DownloadModelsContainer />
+            <AnnouncementsContainer />
+            <CloseButtonContainer />
+        </div>
+    );
+};
+
+const SHOW_MEGAPHONE_TIME = 500;
+
+const AnnouncementsContainer = () => {
+    const labels = ["Check the Latest Status", "最新の状況を確認"];
+    const [is_shown, setIsShown] = useState(0);
+    const [currentLabelIndex, setCurrentLabelIndex] = useState(0);
+    const [is_labels_active, setIsLabelsActive] = useState(false);
+
+    useEffect(() => {
+        const showTimeout = setTimeout(() => {
+            setIsShown(true);
+        }, SHOW_MEGAPHONE_TIME);
+
+        const labelsTimeout = setTimeout(() => {
+            setIsLabelsActive(true);
+        }, SHOW_MEGAPHONE_TIME + 15000);
+
+        let labelInterval;
+        if (is_labels_active) {
+            labelInterval = setInterval(() => {
+                setCurrentLabelIndex((prevIndex) => (prevIndex + 1) % labels.length);
+            }, 4000);
+        }
+
+        return () => {
+            clearTimeout(showTimeout);
+            clearTimeout(labelsTimeout);
+            if (labelInterval) clearInterval(labelInterval);
+        };
+    }, [is_labels_active, labels.length]);
+
+
+    return (
+        <a
+            className={clsx(styles.announcements_button_wrapper, {
+                [styles.is_shown]: is_shown,
+                [styles.is_labels_active]: is_labels_active,
+            })}
+            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>
+    );
+};
+
+
+// Duplicated
+const CloseButtonContainer = () => {
+    const { asyncCloseApp } = useWindow();
+
+    return (
+        <button className={styles.close_button_wrapper} onClick={asyncCloseApp}>
+            <div className={styles.close_button}>
+                <XMarkSvg className={styles.x_mark_svg}/>
+            </div>
+        </button>
+    );
+};