better navbar with realTime Clock

client/components/icons/MoonIcon.tsx

@@ -0,0 +1,16 @@
+export const MoonIcon = (props: any) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path
+      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+      fill="currentColor"
+    />
+  </svg>
+);

client/components/icons/SunIcon.tsx

@@ -0,0 +1,17 @@
+export const SunIcon = (props: any) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path fill="currentColor" d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+    <path
+      fill="currentColor"
+      d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z"
+    />
+  </svg>
+);

client/components/navbar/Clock.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from "react";
+
+export const Clock = () => {
+  const [time, setTime] = useState<Date | null>(null);
+
+  async function fetchCurrentTime() {
+    try {
+      const res = await fetch("/api/config/time", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (res.status === 401) {
+        throw new Error("Unauthorized, please login.");
+      } else if (res.status >= 500) {
+        throw new Error(`Server error: ${res.statusText}`);
+      } else if (!res.ok) {
+        throw new Error("Failed to get date time");
+      }
+
+      const serverTime = new Date(await res.json());
+      setTime(serverTime);
+    } catch (e) {
+      console.error("Error during fetching date time: ", e);
+    }
+  }
+
+  useEffect(() => {
+    fetchCurrentTime();
+
+    const timer = setInterval(() => {
+      setTime((prevTime) => {
+        if (prevTime) {
+          return new Date(prevTime.getTime() + 1000);
+        }
+        return prevTime;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  if (!time) {
+    return <div>Loading...</div>;
+  }
+
+  const formatDate = (date: Date) => {
+    const day = date.getDate().toString().padStart(2, "0");
+    const month = (date.getMonth() + 1).toString().padStart(2, "0"); // +1 perché i mesi in JavaScript partono da 0
+    const year = date.getFullYear();
+    return `${day}/${month}/${year}`;
+  };
+
+  return (
+    <div className="text-md font-light flex flex-col items-center leading-tight">
+      <div>{formatDate(time)}</div>
+      <div>{time.toLocaleTimeString()}</div>
+    </div>
+  );
+};

client/components/navbar/darkmodeswitch.tsx

@@ -1,13 +1,25 @@
 import React from "react";
 import { useTheme as useNextTheme } from "next-themes";
 import { Switch } from "@nextui-org/react";
+import { MoonIcon } from "../icons/MoonIcon";
+import { SunIcon } from "../icons/SunIcon";
 
 export const DarkModeSwitch = () => {
   const { setTheme, resolvedTheme } = useNextTheme();
   return (
     <Switch
+      color="secondary"
       isSelected={resolvedTheme === "dark" ? true : false}
       onValueChange={(e) => setTheme(e ? "dark" : "light")}
-    />
+      thumbIcon={({ isSelected, className }) =>
+        isSelected ? (
+          <SunIcon className={className} />
+        ) : (
+          <MoonIcon className={className} />
+        )
+      }
+    >
+      {resolvedTheme === "dark" ? "Dark" : "Light"}
+    </Switch>
   );
 };

client/components/navbar/navbar.tsx

@@ -1,4 +1,10 @@
-import { Input, Link, Navbar, NavbarContent } from "@nextui-org/react";
+import {
+  Input,
+  Link,
+  Navbar,
+  NavbarContent,
+  NavbarBrand,
+} from "@nextui-org/react";
 import React from "react";
 import { FeedbackIcon } from "../icons/navbar/feedback-icon";
 import { GithubIcon } from "../icons/navbar/github-icon";
@@ -7,6 +13,7 @@ import { SearchIcon } from "../icons/searchicon";
 import { BurguerButton } from "./burguer-button";
 import { NotificationsDropdown } from "./notifications-dropdown";
 import { UserDropdown } from "./user-dropdown";
+import { Clock } from "./Clock";
 
 interface Props {
   children: React.ReactNode;
@@ -22,9 +29,17 @@ export const NavbarWrapper = ({ children }: Props) => {
           wrapper: "w-full max-w-full flex flex-row justify-end",
         }}
       >
-        <NavbarContent className="md:hidden">
+        <NavbarContent className="md:hidden max-w-7">
           <BurguerButton />
         </NavbarContent>
+        <NavbarContent>
+          <p className="text-lg font-light justify-center">Selfie Calendar</p>
+        </NavbarContent>
+
+        <NavbarContent justify="end">
+          <Clock />
+        </NavbarContent>
+
         <NavbarContent
           justify="end"
           className="w-fit data-[justify=end]:flex-grow-0"