Tristan Yang
36 lines
1.6 KiB
TypeScript
36 lines
1.6 KiB
TypeScript
|
|
import { useTranslation } from "react-i18next";
|
|
import { useWizard } from "react-use-wizard";
|
|
import StyledInput from "../../../common/component/styled/Input";
|
|
import StyledButton from "../../../common/component/styled/Button";
|
|
import useInviteLink from "../../../common/hook/useInviteLink";
|
|
import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
|
|
import UpdateFrontendURL from "./UpdateFrontendURL";
|
|
|
|
export default function InviteLink() {
|
|
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
|
|
const { t: ct } = useTranslation();
|
|
const { nextStep } = useWizard();
|
|
const { link, linkCopied, copyLink, generateNewLink } = useInviteLink();
|
|
|
|
return (
|
|
<div className="h-full flex-center flex-col relative">
|
|
<span className="text-2xl mb-2 font-bold">{t("invite_title")}</span>
|
|
<span className="text-sm mb-10 text-gray-400">{t("last_tip")}</span>
|
|
<span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>
|
|
<div className="w-[400px] rounded shadow-md flex border border-solid border-gray-100">
|
|
<StyledInput className="large !border-none !shadow-none" readOnly placeholder="Generating" value={link} />
|
|
<StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-[#088ab2]">
|
|
{linkCopied ? "Copied" : ct("action.copy")}
|
|
</StyledButton>
|
|
</div>
|
|
<StyledButton className="w-32 h-11 mt-6" onClick={nextStep}>
|
|
{t("done")}
|
|
</StyledButton>
|
|
<ServerVersionChecker version="0.3.3" empty={true}>
|
|
<UpdateFrontendURL refreshInviteLink={generateNewLink} />
|
|
</ServerVersionChecker>
|
|
</div>
|
|
);
|
|
}
|