57 lines
2.5 KiB
TypeScript
57 lines
2.5 KiB
TypeScript
/* -------------------------------------------------------------------------- */
|
|
/* Libraries */
|
|
/* -------------------------------------------------------------------------- */
|
|
import React from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Transition } from "@headlessui/react";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Hooks */
|
|
/* -------------------------------------------------------------------------- */
|
|
import { useTranslation } from "react-i18next";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Components */
|
|
/* -------------------------------------------------------------------------- */
|
|
import Button from "components/controls/Button";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Icons */
|
|
/* -------------------------------------------------------------------------- */
|
|
import { ReactComponent as SVGBackIcon } from "assets/svg/backstab.svg";
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Component */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
export default function GlobalControls() {
|
|
/* ------------------------ // Navigation hook usage ------------------------ */
|
|
const navigate = useNavigate();
|
|
const {t} = useTranslation();
|
|
/* -------------------------------- Component ------------------------------- */
|
|
return (
|
|
<>
|
|
<Transition
|
|
show={window.history.state?.idx !== 0}
|
|
enter="transition-opacity duration-75"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="transition-opacity duration-100"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<Button
|
|
type="fill"
|
|
variant="blue"
|
|
onClick={() => navigate(-1)}
|
|
className="font-bold"
|
|
iconed
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex-none w-6 h-6">
|
|
<SVGBackIcon className="w-full h-full stroke-current opacity-60"/>
|
|
</div>
|
|
<div className="flex-1">{t('back')}</div>
|
|
</div>
|
|
</Button>
|
|
</Transition>
|
|
</>
|
|
);
|
|
}
|