feat(projects): projects scrolling using mouse wheel

app/components/Projects/BottomScreen/Projects.vue

@@ -35,6 +35,24 @@ const animateScrolling = (offset: number) => {
   );
 };
 
+const scrollProjects = (direction: "left" | "right") => {
+  let offset = 0;
+  if (
+    direction === "right" &&
+    store.currentProject < store.projects.length - 1
+  ) {
+    store.currentProject += 1;
+    offset = 69;
+  } else if (direction === "left" && store.currentProject > 0) {
+    store.currentProject -= 1;
+    offset = -69;
+  }
+
+  if (offset != 0) {
+    animateScrolling(offset);
+  }
+};
+
 useRender((ctx) => {
   const { startIndex, endIndex } = getBounds();
 
@@ -59,25 +77,25 @@ useRender((ctx) => {
 });
 
 useKeyDown((key) => {
-  // scrolling
-  let offset = 0;
-  if (
-    key === "ArrowRight" &&
-    store.currentProject < store.projects.length - 1
-  ) {
-    store.currentProject += 1;
-    offset = 69;
-  } else if (key === "ArrowLeft" && store.currentProject > 0) {
-    store.currentProject -= 1;
-    offset = -69;
+  switch (key) {
+    case "ArrowLeft":
+      scrollProjects("left");
+      break;
+    case "ArrowRight":
+      scrollProjects("right");
+      break;
+    case "Enter":
+    case " ":
+      store.visitProject();
+      break;
   }
+});
 
-  if (offset != 0) {
-    animateScrolling(offset);
-  }
-
-  if (key === "Enter" || key === " ") {
-    store.visitProject();
+useMouseWheel((dy) => {
+  if (dy > 0) {
+    scrollProjects("right");
+  } else if (dy < 0) {
+    scrollProjects("left");
   }
 });