From 2f694a7f77b4e7b65e66cfb6888c2ca66a3d4852 Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Mon, 1 Aug 2022 18:16:51 +0530
Subject: [PATCH] feat(frontend): created `ScrollView` component

---
 .../frontend/src/components/ScrollView.tsx    | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 services/frontend/src/components/ScrollView.tsx

diff --git a/services/frontend/src/components/ScrollView.tsx b/services/frontend/src/components/ScrollView.tsx
new file mode 100644
index 0000000..4819191
--- /dev/null
+++ b/services/frontend/src/components/ScrollView.tsx
@@ -0,0 +1,46 @@
+import { styled } from "@mui/joy";
+import { FunctionComponent, HTMLProps, ReactElement, ReactNode } from "react";
+
+export interface IScrollViewProps extends HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  height: string;
+}
+
+interface IRootProps extends HTMLProps<HTMLDivElement> {
+  fixedHeight: string;
+}
+
+const Root = styled("div", {
+  shouldForwardProp: (propName) => propName !== "height"
+})<IRootProps>`
+  overflow: auto;
+  height: ${({ height }) => height};
+
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border: #aaa;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+` as any;
+
+export const ScrollView: FunctionComponent<IScrollViewProps> = (
+  props: IScrollViewProps
+): ReactElement => {
+  const { height, children, ...otherProps } = props;
+  return (
+    <Root height={height} {...otherProps}>
+      {children}
+    </Root>
+  );
+};