From aeefbf8f7ff4a29c9639adb6fc8e4bbb4a5ac2db Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 3 Nov 2022 02:26:01 -0700
Subject: [PATCH] Add scroll area component

---
 src/renderer/components/index.ts              |  1 +
 src/renderer/components/scroll-area/index.tsx | 30 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 src/renderer/components/scroll-area/index.tsx

diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts
index 059521851..602de26c4 100644
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@@ -12,3 +12,4 @@ export * from './switch';
 export * from './popover';
 export * from './select';
 export * from './date-picker';
+export * from './scroll-area';
diff --git a/src/renderer/components/scroll-area/index.tsx b/src/renderer/components/scroll-area/index.tsx
new file mode 100644
index 000000000..4aede36a6
--- /dev/null
+++ b/src/renderer/components/scroll-area/index.tsx
@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import {
+  ScrollArea as MantineScrollArea,
+  ScrollAreaProps as MantineScrollAreaProps,
+} from '@mantine/core';
+
+interface ScrollAreaProps extends MantineScrollAreaProps {
+  children: React.ReactNode;
+}
+
+const StyledScrollArea = styled(MantineScrollArea)`
+  & .mantine-ScrollArea-thumb {
+    background: var(--scrollbar-thumb-bg);
+    border-radius: 0;
+  }
+
+  & .mantine-ScrollArea-scrollbar {
+    width: 8px;
+    padding: 0;
+    background: var(--scrollbar-track-bg);
+  }
+`;
+
+export const ScrollArea = ({ children, ...props }: ScrollAreaProps) => {
+  return (
+    <StyledScrollArea offsetScrollbars {...props}>
+      {children}
+    </StyledScrollArea>
+  );
+};