feat(components): add an Overlay component

* add useScrollbarWidth hook
* add useScrollLock hook
* add a new component to lock scroll with an overlay (it can be useful
especially on small screens to prevent background contents to be
scrolled)

1 files changed, 12 insertions, 0 deletions

diff --git a/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts
new file mode 100644
index 0000000..04148be
--- /dev/null
+++ b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from '@jest/globals';
+import { renderHook } from '@testing-library/react';
+import { useScrollBarWidth } from './use-scrollbar-width';
+
+describe('useScrollbarWidth', () => {
+  it('returns the scrollbar width', () => {
+    const { result } = renderHook(() => useScrollBarWidth());
+
+    // JSdom always return 0 for measurements.
+    expect(result.current).toBe(0);
+  });
+});