[UI] Add NewYearComponent

Dockerfile

@@ -56,7 +56,7 @@ LABEL org.opencontainers.image.title="Mobocker" \
     {\"title\":\"Support\", \"url\":\"https://github.com/oleksis/mobocker-extension\"} \
     ]" \
     com.docker.extension.changelog="<ul>\
-    <li>UI: Update the size (font) from elapsed time </li> \
+    <li>UI: Add NewYearComponent </li> \
     </ul>" \
     com.docker.extension.categories="utilities"
 

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "private": true,
   "type": "module",
   "dependencies": {

ui/src/App.tsx

@@ -171,6 +171,25 @@ function ChristmasComponent() {
   );
 }
 
+function isNewYearWeek() {
+  const today = new Date();
+  const newYearDay = new Date(today.getFullYear(), 0, 1); // New Year's day
+  const differenceInDays = Math.floor(
+    (today.getTime() - newYearDay.getTime()) / (1000 * 60 * 60 * 24)
+  );
+  return 0 <= differenceInDays && differenceInDays < 7; // change this to the number of days you consider "close" to New Year
+}
+
+// New Year component
+function NewYearComponent() {
+  const year = new Date().getFullYear();
+  return (
+    <div>
+      <p style={{ fontSize: 10 }}>Whalecome New {year} 🎉</p>
+    </div>
+  );
+}
+
 // Note: This line relies on Docker Desktop's presence as a host application.
 // If you're running this React app in a browser, it won't work properly.
 const client = createDockerDesktopClient();
@@ -330,6 +349,7 @@ export function App() {
         <MobockerComponent initialSize={initialSize} isVisible={isRunning} />
 
         {isCloseToChristmas() && <ChristmasComponent />}
+        {isNewYearWeek() && <NewYearComponent />}
       </Stack>
     </>
   );