42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { type WheelEvent } from "react";
|
|
import { clamp } from "~/utils/math";
|
|
import { WaybarWidget } from "../WaybarWidget";
|
|
import { useApp } from "~/hooks/useApp";
|
|
import { lerpIcon } from "~/utils/icons";
|
|
|
|
const ICONS = ["", "", ""];
|
|
|
|
export const WaybarBrightnessWidget = () => {
|
|
const { brightness, setBrightness } = useApp();
|
|
|
|
const handleScroll = (e: WheelEvent) => {
|
|
let newBrightness = brightness - Math.sign(e.deltaY);
|
|
newBrightness = clamp(newBrightness, 0, 100);
|
|
|
|
setBrightness(newBrightness);
|
|
};
|
|
|
|
const tooltip =
|
|
brightness === 100
|
|
? "Flashbang mode"
|
|
: brightness >= 70
|
|
? "Bright as a Brest day!"
|
|
: brightness >= 50
|
|
? "Halfway to becoming a night owl"
|
|
: brightness >= 25
|
|
? "I'm scared of the dark please stop"
|
|
: brightness >= 15
|
|
? "Just turn off you screen at this point"
|
|
: brightness >= 5
|
|
? "Can you even read now ?"
|
|
: "So dark";
|
|
|
|
return (
|
|
<WaybarWidget className="pl-3 pr-[0.625rem]" tooltip={tooltip}>
|
|
<span onWheel={handleScroll}>
|
|
{lerpIcon(ICONS, brightness, 100)} {brightness}%
|
|
</span>
|
|
</WaybarWidget>
|
|
);
|
|
};
|