| 16 | * @returns |
| 17 | */ |
| 18 | export default function ToolbarContent() { |
| 19 | const { t } = useTranslation("keyBinds"); |
| 20 | const [isClassroomMode] = useAtom(isClassroomModeAtom); |
| 21 | |
| 22 | const [leftMouseMode, setLeftMouseMode] = useState(Settings.mouseLeftMode); |
| 23 | useEffect(() => { |
| 24 | setLeftMouseMode(Settings.mouseLeftMode); |
| 25 | }, [Settings.mouseLeftMode]); |
| 26 | |
| 27 | return ( |
| 28 | <div |
| 29 | className={cn( |
| 30 | "absolute bottom-0 left-1/2 flex -translate-x-1/2 transform flex-col items-center justify-center transition-all hover:opacity-100", |
| 31 | isClassroomMode && "opacity-0", |
| 32 | )} |
| 33 | > |
| 34 | <Toolbar className="bg-popover/95 supports-backdrop-blur:bg-popover/80 border-border/50 rounded-t-lg border-t px-2 py-1.5 shadow-xl backdrop-blur-md"> |
| 35 | <Tooltip> |
| 36 | <TooltipTrigger> |
| 37 | <Button |
| 38 | className={cn("opacity-50", leftMouseMode === "selectAndMove" && "opacity-100")} |
| 39 | variant="ghost" |
| 40 | size="icon" |
| 41 | onClick={() => { |
| 42 | setLeftMouseMode("connectAndCut"); |
| 43 | Settings.mouseLeftMode = "selectAndMove"; |
| 44 | }} |
| 45 | > |
| 46 | <MousePointer /> |
| 47 | </Button> |
| 48 | </TooltipTrigger> |
| 49 | <TooltipContent>{t("checkoutLeftMouseToSelectAndMove.title")}</TooltipContent> |
| 50 | </Tooltip> |
| 51 | |
| 52 | <Tooltip> |
| 53 | <TooltipTrigger> |
| 54 | <Button |
| 55 | className={cn("opacity-50", leftMouseMode === "draw" && "opacity-100")} |
| 56 | variant="ghost" |
| 57 | size="icon" |
| 58 | onClick={() => { |
| 59 | setLeftMouseMode("draw"); |
| 60 | Settings.mouseLeftMode = "draw"; |
| 61 | }} |
| 62 | > |
| 63 | <Pencil /> |
| 64 | </Button> |
| 65 | </TooltipTrigger> |
| 66 | <TooltipContent>{t("checkoutLeftMouseToDrawing.title")}</TooltipContent> |
| 67 | </Tooltip> |
| 68 | |
| 69 | <Tooltip> |
| 70 | <TooltipTrigger> |
| 71 | <Button |
| 72 | className={cn("opacity-50", leftMouseMode === "connectAndCut" && "opacity-100")} |
| 73 | variant="ghost" |
| 74 | size="icon" |
| 75 | onClick={() => { |