From f7de45e47c72081e8fb96d8a2d8e5175777d63c0 Mon Sep 17 00:00:00 2001
From: Arif Hasanic <arif@hasanic.com>
Date: Sun, 31 Aug 2025 15:55:32 +0200
Subject: [PATCH] add small 420 widget

---
 src/components/Dashboard/Dashboard.tsx     |  4 +++
 src/components/FourTwenty/FourTwenty.tsx   | 39 ++++++++++++++++++++++
 src/components/FourTwenty/style.module.css |  5 +++
 3 files changed, 48 insertions(+)
 create mode 100644 src/components/FourTwenty/FourTwenty.tsx
 create mode 100644 src/components/FourTwenty/style.module.css

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
index ebc9db3..3565a07 100644
--- a/src/components/Dashboard/Dashboard.tsx
+++ b/src/components/Dashboard/Dashboard.tsx
@@ -14,6 +14,7 @@ import Weather from "@/components/Weather/Weather";
 
 import amogus from "/img/amogus.png";
 import style from "./style.module.css";
+import FourTwenty from "../FourTwenty/FourTwenty";
 
 export default function Dashboard() {
     const schemes = [style.day, style.evening, style.night];
@@ -60,6 +61,9 @@ export default function Dashboard() {
                         <Card icon="🌤" name="Weather">
                             <Weather />
                         </Card>
+                        <Card icon="🍁" name="420">
+                            <FourTwenty />
+                        </Card>
                     </CardRow>
 
                     <Card icon="🔔" name="Terminal" active={true}>
diff --git a/src/components/FourTwenty/FourTwenty.tsx b/src/components/FourTwenty/FourTwenty.tsx
new file mode 100644
index 0000000..3f85214
--- /dev/null
+++ b/src/components/FourTwenty/FourTwenty.tsx
@@ -0,0 +1,39 @@
+import style from './style.module.css';
+
+function Timer({hours, minutes}: {hours: number, minutes: number}) {
+    const x = hours > 0 ? `${hours}h ` : '';
+    const y = minutes > 0 ? `${minutes % 60}m` : '';
+
+    return (
+        <div>
+            <p>{x}{y}</p>
+        </div>
+    );
+}
+
+function FourTwentyLoading() {
+
+}
+
+function FourTwentySmoking() {
+    return (
+        <div className={style.container}>
+            <img className={style.image} src="https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExMjFlYnhzYzJnc3ZzejBnOGZzcHFpNGpxOHNrN2dwcnZ3NmZ2eWJ0dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5xaOcLRnsWIB0CkfE3u/giphy.gif" alt="Smoking" />
+        </div>
+    );
+}
+
+export default function FourTwenty() {
+    const now = new Date();
+    const fourTwenty = new Date();
+    fourTwenty.setHours(16, 20, 0, 0);
+    const secondsTo420 = Math.floor((fourTwenty.getTime() - now.getTime()) / 1000);
+    const minutesTo420 = Math.floor(secondsTo420 / 60);
+    const hoursTo420 = Math.floor(minutesTo420 / 60);
+
+    return (
+        <div>
+            <FourTwentySmoking />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/FourTwenty/style.module.css b/src/components/FourTwenty/style.module.css
new file mode 100644
index 0000000..bf5e47f
--- /dev/null
+++ b/src/components/FourTwenty/style.module.css
@@ -0,0 +1,5 @@
+.container img {
+    all: unset;
+    object-fit: contain;
+    width: 200px;
+}