feat: chart settings modal (eg. time unit)

src/components/input/WebsiteChartSettings.module.css

@@ -1,3 +1,20 @@
-.dropdown span {
+.container {
-  white-space: nowrap;
+  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;
 }

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;