45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useState } from "react";
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import { Button } from "@mui/material";
|
|
import { QuestionMark as QuestionMarkIcon } from "@mui/icons-material";
|
|
import { useLeafcutterContext } from "@link-stack/leafcutter-ui/components/LeafcutterProvider";
|
|
|
|
export const HelpButton: FC = () => {
|
|
const router = useRouter();
|
|
const pathname = usePathname() ?? "";
|
|
const [helpActive, setHelpActive] = useState(false);
|
|
const {
|
|
colors: { leafcutterElectricBlue },
|
|
} = useLeafcutterContext();
|
|
const onClick = () => {
|
|
if (helpActive) {
|
|
router.push(pathname);
|
|
} else {
|
|
router.push("/?tooltip=welcome");
|
|
}
|
|
setHelpActive(!helpActive);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
color="primary"
|
|
onClick={onClick}
|
|
sx={{
|
|
backgroundColor: leafcutterElectricBlue,
|
|
width: "40px",
|
|
height: "40px",
|
|
minWidth: "40px",
|
|
p: 0,
|
|
borderRadius: "500px",
|
|
":hover": {
|
|
backgroundColor: leafcutterElectricBlue,
|
|
opacity: 0.8,
|
|
},
|
|
}}
|
|
>
|
|
<QuestionMarkIcon width="30px" height="30px" htmlColor="white" />
|
|
</Button>
|
|
);
|
|
};
|