Add optional boxed styling and error component to information widgets

Signed-off-by: Denis Papec <denis.papec@gmail.com>

src/components/widgets/datetime/datetime.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { useTranslation } from "next-i18next";
+import classNames from "classnames";
 
 const textSizes = {
   "4xl": "text-4xl",
@@ -17,7 +18,7 @@ export default function DateTime({ options }) {
   const { i18n } = useTranslation();
   const [date, setDate] = useState("");
   const dateLocale = locale ?? i18n.language;
-  
+
   useEffect(() => {
     const dateFormat = new Intl.DateTimeFormat(dateLocale, { ...format });
     const interval = setInterval(() => {
@@ -27,7 +28,10 @@ export default function DateTime({ options }) {
   }, [date, setDate, dateLocale, format]);
 
   return (
-    <div className="flex flex-col justify-center first:ml-0 ml-4">
+    <div className={classNames(
+      "flex flex-col justify-center first:ml-0 ml-4",
+      options?.styleBoxed === true && " mt-2 m:mb-0 rounded-md shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 dark:bg-white/5 p-3",
+    )}>
       <div className="flex flex-row items-center grow justify-end">
         <span className={`text-theme-800 dark:text-theme-200 tabular-nums ${textSizes[textSize || "lg"]}`}>
           {date}