From 93913573dfebea563ed6d4dfe9f0417b27defd34 Mon Sep 17 00:00:00 2001
From: Caio Carvalho <21188280+ccrvlh@users.noreply.github.com>
Date: Fri, 18 Oct 2024 23:38:58 -0300
Subject: [PATCH] feat: time unit settings form

---
 src/app/(main)/profile/TimeUnitSettings.tsx | 28 +++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/app/(main)/profile/TimeUnitSettings.tsx

diff --git a/src/app/(main)/profile/TimeUnitSettings.tsx b/src/app/(main)/profile/TimeUnitSettings.tsx
new file mode 100644
index 000000000..506761776
--- /dev/null
+++ b/src/app/(main)/profile/TimeUnitSettings.tsx
@@ -0,0 +1,28 @@
+import { useMessages } from 'components/hooks';
+import useTimeUnit from 'components/hooks/useTimeUnit';
+import { Button, Dropdown, Flexbox, Item } from 'react-basics';
+import styles from './TimeUnitSettings.module.css';
+
+export function TimeUnitSettings() {
+  const { formatMessage, labels } = useMessages();
+  const { currentTimeUnit, timeUnitOptions, saveTimeUnit } = useTimeUnit();
+
+  const handleReset = () => saveTimeUnit('hour');
+
+  return (
+    <Flexbox gap={10}>
+      <Dropdown
+        className={styles.dropdown}
+        items={timeUnitOptions}
+        value={currentTimeUnit}
+        onChange={(value: any) => saveTimeUnit(value)}
+        menuProps={{ className: styles.menu }}
+      >
+        {item => <Item key={item}>{item}</Item>}
+      </Dropdown>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Flexbox>
+  );
+}
+
+export default TimeUnitSettings;