Moved to _dev

open-resume/src/app/lib/hooks/useAutosizeTextareaHeight.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Hook to autosize textarea height.
+ *
+ * The trick to resize is to first set its height to 0 and then set it back to scroll height.
+ * Reference: https://stackoverflow.com/a/25621277/7699841
+ *
+ * @example // Tailwind CSS
+ * const textareaRef = useAutosizeTextareaHeight({ value });
+ * <textarea ref={textareaRef} className="resize-none overflow-hidden"/>
+ */
+export const useAutosizeTextareaHeight = ({ value }: { value: string }) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const resizeHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "0px";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  };
+
+  // Resize height when value changes
+  useEffect(() => {
+    resizeHeight();
+  }, [value]);
+
+  // Resize height when viewport resizes
+  useEffect(() => {
+    window.addEventListener("resize", resizeHeight);
+    return () => window.removeEventListener("resize", resizeHeight);
+  }, []);
+
+  return textareaRef;
+};

open-resume/src/app/lib/hooks/useTailwindBreakpoints.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+const enum TailwindBreakpoint {
+  sm = 640,
+  md = 768,
+  lg = 1024,
+  xl = 1280,
+  "2xl" = 1536,
+}
+
+export const useTailwindBreakpoints = () => {
+  const [isSm, setIsSm] = useState(false);
+  const [isMd, setIsMd] = useState(false);
+  const [isLg, setIsLg] = useState(false);
+  const [isXl, setIsXl] = useState(false);
+  const [is2xl, setIs2xl] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const screenWidth = window.innerWidth;
+      setIsSm(screenWidth >= TailwindBreakpoint.sm);
+      setIsMd(screenWidth >= TailwindBreakpoint.md);
+      setIsLg(screenWidth >= TailwindBreakpoint.lg);
+      setIsXl(screenWidth >= TailwindBreakpoint.xl);
+      setIs2xl(screenWidth >= TailwindBreakpoint["2xl"]);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return { isSm, isMd, isLg, isXl, is2xl };
+};