48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
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>
|
|
);
|
|
}; |