add PDP content

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

hooks/use-debounce.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useDebounce = (value: string, delay = 500) => {
+  const [debouncedValue, setDebouncedValue] = useState('');
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    timerRef.current = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => {
+      clearTimeout(timerRef.current);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};