continue re-design

hooks/useDebouncedCallback.ts

@@ -0,0 +1,34 @@
+import {
+  useCallback, useRef
+} from 'react';
+
+const DEFAULT_CONFIG = { timeout: 0 };
+
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  config: number | { timeout?: number }
+): T {
+  const timeoutRef = useRef(0);
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+
+  const currentConfig = typeof config === 'object' ? {
+    ...DEFAULT_CONFIG,
+    ...config
+  } : {
+    ...DEFAULT_CONFIG,
+    timeout: config
+  };
+
+  return useCallback((...args: Parameters<T>) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = window.setTimeout(() => {
+      callbackRef.current(...args);
+    }, currentConfig.timeout);
+  }, [currentConfig.timeout]) as T;
+}
+
+export default useDebouncedCallback;

hooks/useDebouncedEffect.ts

@@ -0,0 +1,68 @@
+import {
+  useEffect, useRef
+} from 'react';
+
+const DEFAULT_CONFIG = {
+  timeout: 0,
+  ignoreInitialCall: true
+};
+
+export function useDebouncedEffect(
+  callback: () => (void | (() => void)),
+  config: number | {
+    timeout?: number;
+    ignoreInitialCall?: boolean;
+  },
+  deps: any[] = []
+): void {
+  let currentConfig;
+
+  if (typeof config === 'object') {
+    currentConfig = {
+      ...DEFAULT_CONFIG,
+      ...config
+    };
+  } else {
+    currentConfig = {
+      ...DEFAULT_CONFIG,
+      timeout: config
+    };
+  }
+  const {
+    timeout, ignoreInitialCall
+  } = currentConfig;
+
+  const data = useRef<{ firstTime: boolean }>({ firstTime: true });
+
+  useEffect(() => {
+    const { firstTime } = data.current;
+
+    if (firstTime && ignoreInitialCall) {
+      data.current.firstTime = false;
+
+      return;
+    }
+
+    let clearFunc: (() => void) | undefined;
+
+    const handler = setTimeout(() => {
+      clearFunc = callback() ?? undefined;
+    }, timeout);
+
+    return () => {
+      clearTimeout(handler);
+
+      if (clearFunc && typeof clearFunc === 'function') {
+        clearFunc();
+      }
+    };
+  }, [
+    callback,
+    ignoreInitialCall,
+    timeout,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...deps
+  ]);
+}
+
+export default useDebouncedEffect;

hooks/useSwitchingCode.ts

@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState } from 'react';
+import { encryptText } from '@/components/app/(home)/sections/hero/Title/Title';
+
+
+
+export default function useSwitchingCode(code: string, ms = 20, progress = 1, fill = true) {
+  const [value, setValue] = useState(code);
+  const prevCode = useRef(value);
+
+  useEffect(() => {
+    if (code === prevCode.current) return;
+
+    let i = 0;
+
+    setValue(prevCode.current);
+
+    let timeout: number;
+
+    const tick = () => {
+      i += progress;
+
+      const prevLines = prevCode.current.split('\n');
+      const currentLines = code.split('\n');
+
+      const maxLines = fill ? 10 : Math.max(prevLines.length, currentLines.length);
+      while (prevLines.length < maxLines) prevLines.push('');
+      while (currentLines.length < maxLines) currentLines.push('');
+
+      const remainingLines = prevLines.map((line, index) => {
+        if (line === currentLines[index]) return line;
+
+        const charLength = Math.floor(line.length * (i / 30));
+
+        return (currentLines[index]?.slice(0, Math.floor(currentLines[index].length * (i / 30))) ?? '')
+         + encryptText(line.slice(charLength), 0, { randomizeChance: 0.5 });
+      });
+
+      setValue((fill ? remainingLines : remainingLines.filter((line, index, arr) => {
+        if (line === '' && arr[index - 1] === '') return false;
+
+        return true;
+      })).join('\n'));
+
+      if (i < 30) {
+        timeout = window.setTimeout(tick, ms);
+      } else {
+        prevCode.current = code;
+      }
+    };
+
+    tick();
+
+    return () => {
+      window.clearTimeout(timeout);
+      prevCode.current = code;
+    };
+  }, [code, ms, progress, fill]);
+
+  return value;
+}