From 0075429e085166c54a3c4796bca93e92ed767b0c Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Fri, 16 Sep 2022 10:53:12 +0300
Subject: [PATCH] add greeting and datetime info widgets

---
 src/components/widget.jsx                    | 10 ++++--
 src/components/widgets/datetime/datetime.jsx | 36 ++++++++++++++++++++
 src/components/widgets/greeting/greeting.jsx | 22 ++++++++++++
 src/pages/index.jsx                          |  2 +-
 4 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 src/components/widgets/datetime/datetime.jsx
 create mode 100644 src/components/widgets/greeting/greeting.jsx

diff --git a/src/components/widget.jsx b/src/components/widget.jsx
index dc5bee1b0..ae5795426 100644
--- a/src/components/widget.jsx
+++ b/src/components/widget.jsx
@@ -2,6 +2,8 @@ import WeatherApi from "components/widgets/weather/weather";
 import OpenWeatherMap from "components/widgets/openweathermap/weather";
 import Resources from "components/widgets/resources/resources";
 import Search from "components/widgets/search/search";
+import Greeting from "components/widgets/greeting/greeting";
+import DateTime from "components/widgets/datetime/datetime";
 
 const widgetMappings = {
   weather: WeatherApi, // This key will be deprecated in the future
@@ -9,13 +11,15 @@ const widgetMappings = {
   openweathermap: OpenWeatherMap,
   resources: Resources,
   search: Search,
+  greeting: Greeting,
+  datetime: DateTime,
 };
 
 export default function Widget({ widget }) {
-  const ServiceWidget = widgetMappings[widget.type];
+  const InfoWidget = widgetMappings[widget.type];
 
-  if (ServiceWidget) {
-    return <ServiceWidget options={widget.options} />;
+  if (InfoWidget) {
+    return <InfoWidget options={widget.options} />;
   }
 
   return (
diff --git a/src/components/widgets/datetime/datetime.jsx b/src/components/widgets/datetime/datetime.jsx
new file mode 100644
index 000000000..af7fe97c3
--- /dev/null
+++ b/src/components/widgets/datetime/datetime.jsx
@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+const textSizes = {
+  "4xl": "text-4xl",
+  "3xl": "text-3xl",
+  "2xl": "text-2xl",
+  xl: "text-xl",
+  lg: "text-lg",
+  md: "text-md",
+  sm: "text-sm",
+  xs: "text-xs",
+};
+
+export default function DateTime({ options }) {
+  const { text_size: textSize, format } = options;
+  const { i18n } = useTranslation();
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [setDate]);
+
+  const dateFormat = new Intl.DateTimeFormat(i18n.language, { ...format });
+
+  return (
+    <div className="flex flex-row items-center grow justify-end">
+      <span className={`text-theme-800 dark:text-theme-200 ${textSizes[textSize || "lg"]}`}>
+        {dateFormat.format(date)}
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/widgets/greeting/greeting.jsx b/src/components/widgets/greeting/greeting.jsx
new file mode 100644
index 000000000..b4607b4d8
--- /dev/null
+++ b/src/components/widgets/greeting/greeting.jsx
@@ -0,0 +1,22 @@
+const textSizes = {
+  "4xl": "text-4xl",
+  "3xl": "text-3xl",
+  "2xl": "text-2xl",
+  xl: "text-xl",
+  lg: "text-lg",
+  md: "text-md",
+  sm: "text-sm",
+  xs: "text-xs",
+};
+
+export default function Greeting({ options }) {
+  if (options.text) {
+    return (
+      <div className="flex flex-row items-center justify-start">
+        <span className={`text-theme-800 dark:text-theme-200 ${textSizes[options.text_size || "xl"]}`}>
+          {options.text}
+        </span>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 2a9354d93..3715f6a86 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -21,7 +21,7 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
   ssr: false,
 });
 
-const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"];
+const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search", "datetime"];
 
 export async function getStaticProps() {
   const settings = await getSettings();