add small 420 widget

src/components/Dashboard/Dashboard.tsx

@@ -13,6 +13,7 @@ import Timetable from "@/components/Timetable/Timetable";
 import Weather from "@/components/Weather/Weather";
 
 import style from "./style.module.css";
+import FourTwenty from "../FourTwenty/FourTwenty";
 
 export default function Dashboard() {
     const schemes = [style.day, style.evening, style.night];
@@ -56,6 +57,9 @@ export default function Dashboard() {
                         <Card icon="🌤" name="Weather">
                             <Weather />
                         </Card>
+                        <Card icon="🍁" name="420">
+                            <FourTwenty />
+                        </Card>
                     </CardRow>
 
                     <Card icon="🔔" name="Terminal" active={true}>

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>
+    );
+}

src/components/FourTwenty/style.module.css

@@ -0,0 +1,5 @@
+.container img {
+    all: unset;
+    object-fit: contain;
+    width: 200px;
+}