Add scroll area component

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';

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>
+  );
+};