feat: add datetime & weather

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.52.2",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
     "lucide-react": "^0.436.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       lucide-react:
         specifier: ^0.436.0
         version: 0.436.0(react@18.3.1)
@@ -722,6 +725,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@4.3.6:
     resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
     engines: {node: '>=6.0'}
@@ -2127,6 +2133,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  dayjs@1.11.13: {}
+
   debug@4.3.6:
     dependencies:
       ms: 2.1.2

src/app.tsx

@@ -4,6 +4,10 @@ import dotPattern from "@/assets/dotpattern.svg";
 import logo from "@/assets/logo.svg";
 import ParallaxView from "./components/parallax-view";
 import ChatWindow from "./components/chat-window";
+import { useEffect, useState } from "react";
+import dayjs from "dayjs";
+import { useQuery } from "@tanstack/react-query";
+import { CloudSun, GitPullRequest } from "lucide-react";
 
 const App = () => {
   return (
@@ -45,13 +49,14 @@ const App = () => {
         depth={0.005}
         className="absolute left-1/2 -bottom-[5%] w-full"
       >
-        <div className="animate-[updown_8s_ease-in-out_infinite] w-full pointer-events-none">
+        <div className="animate-[updown_8s_ease-in-out_infinite] w-full">
           <img
             src={furinaImg}
             className="max-h-screen w-full aspect-[0.666] object-contain -translate-x-1/2"
           />
         </div>
       </ParallaxView>
+
       <div className="absolute left-1/2 -translate-x-1/2 top-0 h-full w-full max-w-3xl">
         <ParallaxView
           depth={0.01}
@@ -61,6 +66,32 @@ const App = () => {
             <img src={logo} className="w-[120px] md:w-[200px]" />
           </div>
         </ParallaxView>
+
+        <p className="absolute left-4 md:left-0 bottom-10 text-white text-sm">
+          Furina artwork by{" "}
+          <a
+            href="https://www.pixiv.net/en/users/98144454"
+            target="_blank"
+            rel="nofollow"
+            className="font-bold"
+          >
+            Rine
+          </a>
+        </p>
+
+        <p className="absolute left-4 md:left-auto md:right-0 bottom-4 md:bottom-10 text-white text-sm">
+          <GitPullRequest className="inline mr-2" size={16} />
+          Fork{" "}
+          <a
+            href="https://git.rul.sh/khairul169/furina.id"
+            target="_blank"
+            className="font-bold"
+          >
+            Repo
+          </a>
+        </p>
+
+        <Clock />
       </div>
 
       <ChatWindow />
@@ -68,4 +99,51 @@ const App = () => {
   );
 };
 
+const Clock = () => {
+  const [time, setTime] = useState(new Date());
+  const { data: weather } = useQuery({
+    queryKey: ["forecast"],
+    queryFn: async () => {
+      const url =
+        "https://api.open-meteo.com/v1/forecast?latitude=-6.2297401&longitude=106.7469453&current_weather=true";
+      const res = await fetch(url);
+      if (!res.ok) {
+        throw new Error(res.statusText);
+      }
+      const data = await res.json();
+      return data?.current_weather;
+    },
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <ParallaxView
+      depth={0.01}
+      className="bg-white/10 border border-white/40 backdrop-blur-sm text-white p-4 rounded-lg absolute right-4 md:right-0 bottom-24 md:bottom-[10%]"
+    >
+      <p className="text-right">{dayjs(time).format("dddd, DD MMM YYYY")}</p>
+
+      <p className="text-3xl md:text-5xl font-mono mt-1">
+        {dayjs(time).format("hh:mm:ss")}
+      </p>
+
+      {weather ? (
+        <div className="flex flex-row items-center gap-2 mt-0.5 justify-end md:text-2xl">
+          <CloudSun size={20} />
+          <p>
+            {weather?.temperature}
+            <span className="text-sm"> °C</span>
+          </p>
+        </div>
+      ) : null}
+    </ParallaxView>
+  );
+};
+
 export default App;

src/main.css

@@ -1,7 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+html, body {
+  font-family: 'Poppins', sans-serif;
+}
+
 /* Chrome, Edge and Safari */
 *::-webkit-scrollbar {
   height: 8px;