From e3be2289df142293058324ffd8d3efb1db514722 Mon Sep 17 00:00:00 2001
From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com>
Date: Fri, 18 Oct 2024 23:42:03 -0300
Subject: [PATCH] feat: chart settings modal (eg. time unit)

---
 .../input/WebsiteChartSettings.module.css     | 21 ++++++++-
 src/components/input/WebsiteChartSettings.tsx | 44 +++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 src/components/input/WebsiteChartSettings.tsx

diff --git a/src/components/input/WebsiteChartSettings.module.css b/src/components/input/WebsiteChartSettings.module.css
index bd9ec1a8c..9c1fdbd8d 100644
--- a/src/components/input/WebsiteChartSettings.module.css
+++ b/src/components/input/WebsiteChartSettings.module.css
@@ -1,3 +1,20 @@
-.dropdown span {
-  white-space: nowrap;
+.container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.buttons {
+  display: flex;
+}
+
+.buttons button:first-child {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-inline-end: 1px solid var(--base400);
+}
+
+.buttons button:last-child {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
diff --git a/src/components/input/WebsiteChartSettings.tsx b/src/components/input/WebsiteChartSettings.tsx
new file mode 100644
index 000000000..07aa5a92a
--- /dev/null
+++ b/src/components/input/WebsiteChartSettings.tsx
@@ -0,0 +1,44 @@
+import TimeUnitSettings from 'app/(main)/profile/TimeUnitSettings';
+import { useMessages } from 'components/hooks';
+import { Button, Form, FormRow, Modal } from 'react-basics';
+import styles from './WebsiteChartSettings.module.css';
+
+export interface WebsiteChartSettingsProps {
+  isOpened?: boolean;
+  onClose?: () => void;
+  onChange?: (value: string) => void;
+}
+
+export function WebsiteChartSettings({ onClose }: WebsiteChartSettingsProps) {
+  const { formatMessage, labels } = useMessages();
+
+  const handleSave = () => {
+    // Save the settings
+  };
+
+  const handleClose = () => onClose();
+
+  return (
+    <>
+      <Modal onClose={handleClose}>
+        <div className={styles.container}>
+          <div>
+            <Form>
+              <FormRow label={formatMessage(labels.timeUnit)}>
+                <TimeUnitSettings />
+              </FormRow>
+            </Form>
+          </div>
+          <div className={styles.buttons}>
+            <Button variant="primary" onClick={handleSave} disabled={false}>
+              {formatMessage(labels.save)}
+            </Button>
+            <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+export default WebsiteChartSettings;