From 40bd4d5dfead59b76ad7c43ce264104d741af4ad Mon Sep 17 00:00:00 2001
From: Vansmak <i.am.vansmak@gmail.com>
Date: Mon, 15 May 2023 13:31:49 -0700
Subject: [PATCH] added quote widget as an information widget

gets daily quote from https://api.quotable.io/random options for  text_size: and width:
- quote:
    text_size: md
    width: 400px
---
 src/components/widgets/quote/quote.jsx | 43 ++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/components/widgets/quote/quote.jsx

diff --git a/src/components/widgets/quote/quote.jsx b/src/components/widgets/quote/quote.jsx
new file mode 100644
index 00000000..9fb3119d
--- /dev/null
+++ b/src/components/widgets/quote/quote.jsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import useSWR from "swr";
+
+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 DailyQuote({ options }) {
+  const { text_size: textSize, width } = options;
+  const [quote, setQuote] = useState(null);
+
+  useSWR("https://api.quotable.io/random", {
+    onSuccess: (data) => {
+      setQuote(data);
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+  });
+
+  if (!quote) {
+    return null;
+  }
+
+  const textClass = `quote-content ${textSizes[textSize || "lg"]} text-theme-800 dark:text-theme-200`;
+  const wrapperStyle = { width };
+
+  return (
+    <div className="flex flex-col justify-center ml-4" style={wrapperStyle}>
+      <div className={textClass}>
+        &ldquo;{quote.content}&rdquo;
+      </div>
+      <div className="quote-author">{quote.author}</div>
+    </div>
+  );
+}