add small 420 widget

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