From e86eb7798fccc396f0a3f1de1bd9d8534157e65b Mon Sep 17 00:00:00 2001
From: "Thomas \"ajnart\" Camlong" <thomascamlong@gmail.com>
Date: Sun, 15 May 2022 13:53:47 +0200
Subject: [PATCH] :construction: Set up the structure for the weather module

---
 src/components/modules/index.ts               |  1 +
 .../modules/weather/WeatherModule.tsx         | 41 +++++++++++++++++++
 src/components/modules/weather/index.ts       |  1 +
 3 files changed, 43 insertions(+)
 create mode 100644 src/components/modules/weather/WeatherModule.tsx
 create mode 100644 src/components/modules/weather/index.ts

diff --git a/src/components/modules/index.ts b/src/components/modules/index.ts
index 134be155c..4b85fa930 100644
--- a/src/components/modules/index.ts
+++ b/src/components/modules/index.ts
@@ -2,3 +2,4 @@ export * from './date';
 export * from './calendar';
 export * from './search';
 export * from './ping';
+export * from './weather';
diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx
new file mode 100644
index 000000000..bb157fda9
--- /dev/null
+++ b/src/components/modules/weather/WeatherModule.tsx
@@ -0,0 +1,41 @@
+import { Group, Text, Title } from '@mantine/core';
+import dayjs from 'dayjs';
+import { useEffect, useState } from 'react';
+import { Clock, Cloud } from 'tabler-icons-react';
+import { IModule } from '../modules';
+
+export const WeatherModule: IModule = {
+  title: 'Weather',
+  description: 'Look up the current weather in your location',
+  icon: Cloud,
+  component: WeatherComponent,
+};
+
+export default function WeatherComponent(props: any) {
+  const [date, setDate] = useState(new Date());
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+
+  // Change date on minute change
+  // Note: Using 10 000ms instead of 1000ms to chill a little :)
+  useEffect(() => {
+    setInterval(() => {
+      setDate(new Date());
+    }, 10000);
+  }, []);
+
+  return (
+    <Group p="sm" direction="column">
+      <Title>
+        {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
+      </Title>
+      <Text size="xl">
+        {
+          // Use dayjs to format the date
+          // https://day.js.org/en/getting-started/installation/
+          dayjs(date).format('dddd, MMMM D')
+        }
+      </Text>
+    </Group>
+  );
+}
diff --git a/src/components/modules/weather/index.ts b/src/components/modules/weather/index.ts
new file mode 100644
index 000000000..e8817394b
--- /dev/null
+++ b/src/components/modules/weather/index.ts
@@ -0,0 +1 @@
+export { WeatherModule } from './WeatherModule';