47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import {Affix, Button, Group, rem, Stack} from "@mantine/core";
|
|
import ArrowUpIcon from "mdi-react/ArrowUpIcon";
|
|
import HomeIcon from "mdi-react/HomeIcon";
|
|
import {useNavigate} from "react-router";
|
|
import {useWindowScroll} from "@mantine/hooks";
|
|
import {ThemeToggle} from "~/components/subs/ThemeToggle.tsx";
|
|
import {roundThemeButton} from "~/styles.ts";
|
|
|
|
export default function () {
|
|
const navigate = useNavigate();
|
|
const [scroll, scrollTo] = useWindowScroll();
|
|
|
|
const buttonSize = 23;
|
|
const circleSize = 55;
|
|
|
|
return (
|
|
<>
|
|
<Affix position={{ bottom: 20, right: 20 }}>
|
|
<Group dir="reverse">
|
|
<Button
|
|
radius={circleSize}
|
|
w={circleSize}
|
|
h={circleSize}
|
|
p={0}
|
|
disabled={scroll.y <= 0}
|
|
onClick={() => scrollTo({ y: 0 })}
|
|
>
|
|
<ArrowUpIcon size={buttonSize} />
|
|
</Button>
|
|
|
|
<ThemeToggle extraStyle={roundThemeButton} iconStyle={{width: rem(buttonSize - 3), height: rem(buttonSize - 3)}}/>
|
|
|
|
<Button
|
|
radius={circleSize}
|
|
w={circleSize}
|
|
h={circleSize}
|
|
p={0}
|
|
onClick={() => navigate("/")}
|
|
>
|
|
<HomeIcon size={buttonSize}/>
|
|
</Button>
|
|
</Group>
|
|
|
|
</Affix>
|
|
</>
|
|
)
|
|
} |