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

src-ui/views/app/config_page/version_label/VersionLabel.jsx

@@ -0,0 +1,48 @@
+import { useI18n } from "@useI18n";
+import { useState } from "react";
+import clsx from "clsx";
+import styles from "./VersionLabel.module.scss";
+
+import { useSoftwareVersion, useComputeMode } from "@logics_common";
+import CopySvg from "@images/copy.svg?react";
+import CheckMarkSvg from "@images/check_mark.svg?react";
+
+export const VersionLabel = () => {
+    const [is_copied, setIsCopied] = useState(false);
+
+    const { t } = useI18n();
+    const { currentSoftwareVersion } = useSoftwareVersion();
+    const { currentComputeMode } = useComputeMode();
+
+    const version_label = currentComputeMode.data === "cpu"
+        ? t("config_page.common.version", { version: currentSoftwareVersion.data })
+        : currentComputeMode.data === "cuda"
+        ? t("config_page.common.version", { version: currentSoftwareVersion.data }) + " CUDA"
+        : t("config_page.common.version", { version: currentSoftwareVersion.data });
+
+        const is_cpu = currentComputeMode.data === "cpu";
+
+        const copyToClipboard = async () => {
+            if (is_copied) return;
+            const copy_text = is_cpu ? `${currentSoftwareVersion.data}` : `${currentSoftwareVersion.data} CUDA`;
+            await navigator.clipboard.writeText(copy_text);
+            setIsCopied(true);
+
+            setTimeout(() => {
+                setIsCopied(false);
+            }, 1000);
+        };
+
+
+    return (
+        <div className={styles.container}>
+            <div className={clsx(styles.wrapper, {[styles.is_copied]: is_copied})} onClick={copyToClipboard}>
+                <p className={styles.version_label}>{version_label}</p>
+                {is_copied
+                    ? <CheckMarkSvg className={styles.check_mark_svg}/>
+                    : <CopySvg className={styles.copy_svg}/>
+                }
+            </div>
+        </div>
+    );
+};