feat(waybar): implement all dummy widgets

src/components/Waybar/Widgets/WaybarVolumeWidget.tsx

@@ -0,0 +1,37 @@
+import { type WheelEvent, useState } 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 WaybarVolumeWidget = () => {
+  const [muted, setMuted] = useState(false);
+  const { volume, setVolume } = useApp();
+
+  const handleWheel = (e: WheelEvent) => {
+    let newVolume = volume - Math.sign(e.deltaY) * 5;
+    newVolume = clamp(newVolume, 0, 100);
+
+    setVolume(newVolume);
+  };
+
+  const handleClick = () => {
+    setMuted(!muted);
+  };
+
+  const icon = muted ? "" : lerpIcon(ICONS, volume, 100);
+
+  return (
+    <WaybarWidget className="px-[0.625rem]" interactable>
+      <span
+        className="text-[#407cdd]"
+        onWheel={handleWheel}
+        onClick={handleClick}
+      >
+        {icon} {!muted && `${volume}%`}
+      </span>
+    </WaybarWidget>
+  );
+};