feat: add file upload component with drag-and-drop support

src/ui/hooks/use-as-ref.ts

@@ -0,0 +1,14 @@
+import { useIsomorphicLayoutEffect } from '@/ui/hooks/use-isomorphic-layout-effect';
+import * as React from 'react';
+
+function useAsRef<T>(props: T) {
+    const ref = React.useRef<T>(props);
+
+    useIsomorphicLayoutEffect(() => {
+        ref.current = props;
+    });
+
+    return ref;
+}
+
+export { useAsRef };

src/ui/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+const useIsomorphicLayoutEffect =
+    typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+export { useIsomorphicLayoutEffect };

src/ui/hooks/use-lazy-ref.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+function useLazyRef<T>(fn: () => T) {
+    const ref = React.useRef<T | null>(null);
+
+    if (ref.current === null) {
+        ref.current = fn();
+    }
+
+    return ref as React.RefObject<T>;
+}
+
+export { useLazyRef };