From e8fa840aff5117f2aea1b2bc0a9b94ba544b17b2 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Thu, 16 May 2024 19:45:13 +0200
Subject: [PATCH] feat: Added ScrollableContainer for pages with a sidebarg

---
 .../src/ui/components/ScrollableContainer.tsx | 23 ++++++++++++++
 desktop/src/ui/pages/settings/components.tsx  | 31 +++++++++++++++++++
 .../settings/launcher/SettingsGeneral.tsx     | 10 ++++--
 3 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 desktop/src/ui/components/ScrollableContainer.tsx
 create mode 100644 desktop/src/ui/pages/settings/components.tsx

diff --git a/desktop/src/ui/components/ScrollableContainer.tsx b/desktop/src/ui/components/ScrollableContainer.tsx
new file mode 100644
index 00000000..669caaed
--- /dev/null
+++ b/desktop/src/ui/components/ScrollableContainer.tsx
@@ -0,0 +1,23 @@
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
+import type { ParentProps } from 'solid-js';
+
+type ScrollableContainerProps = ParentProps & {
+	title: string;
+};
+
+function ScrollableContainer(props: ScrollableContainerProps) {
+	return (
+		<div class="flex flex-col flex-1">
+			<h1>{props.title}</h1>
+			<div class="flex flex-col flex-1 rounded-lg overflow-hidden w-[calc(100%+14px)]">
+				<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
+					<div class="flex flex-col absolute w-[calc(100%-14px)] gap-2">
+						{props.children}
+					</div>
+				</OverlayScrollbarsComponent>
+			</div>
+		</div>
+	);
+}
+
+export default ScrollableContainer;
diff --git a/desktop/src/ui/pages/settings/components.tsx b/desktop/src/ui/pages/settings/components.tsx
new file mode 100644
index 00000000..dbb1456c
--- /dev/null
+++ b/desktop/src/ui/pages/settings/components.tsx
@@ -0,0 +1,31 @@
+import { type JSX, type ParentProps, createEffect } from 'solid-js';
+
+type SettingsRowProps = ParentProps & {
+	title: string;
+	description: string;
+	icon: JSX.Element;
+	clickable?: () => any;
+};
+
+function SettingsRow(props: SettingsRowProps) {
+	const interactableClass = createEffect(() => props.clickable ? 'hover:bg-component-bg-hover active:bg-component-bg-pressed' : '');
+
+	return (
+		<div class={`flex flex-row bg-component-bg rounded-xl gap-4 p-4 ${interactableClass} items-center`}>
+			<div class="flex justify-center items-center h-8 w-8">
+				{props.icon}
+			</div>
+
+			<div class="flex flex-col gap-1 flex-1">
+				<h3>{props.title}</h3>
+				<p class="text-wrap">{props.description}</p>
+			</div>
+
+			<div class="">
+				<span>test</span>
+			</div>
+		</div>
+	);
+}
+
+export default SettingsRow;
diff --git a/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx b/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx
index d3fd90f2..55330fa5 100644
--- a/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx
+++ b/desktop/src/ui/pages/settings/launcher/SettingsGeneral.tsx
@@ -1,8 +1,12 @@
+import { Code01Icon } from '@untitled-theme/icons-solid';
+import SettingsRow from '../components';
+import ScrollableContainer from '~ui/components/ScrollableContainer';
+
 function SettingsGeneral() {
 	return (
-		<div>
-			<h1>General</h1>
-		</div>
+		<ScrollableContainer title="General">
+			<SettingsRow title="Title" description="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the" icon={<Code01Icon />} />
+		</ScrollableContainer>
 	);
 }