promo.tsx

Author: mlc

src/Promo.tsx

@@ -0,0 +1,31 @@
+import type { FunctionComponent } from 'preact';
+
+const dayLeftString = (days: number): string => {
+  if (days === 0) {
+    return 'Less than a day left!';
+  } else if (days === 1) {
+    return 'Just one day left!';
+  } else {
+    return `Just ${days} days left!`;
+  }
+};
+
+const Promo: FunctionComponent = () => {
+  const now = Date.now();
+  const daysLeft = Math.floor((1752735600000 - now) / (86400 * 1000));
+  if (daysLeft < 0) {
+    return null;
+  } else {
+    return (
+      <p class="votenote">
+        <strong>{dayLeftString(daysLeft)}</strong> Please consider{' '}
+        <a target="_blank" href="https://www.youtube.com/shorts/4h8mYt6qnlw">
+          voting for Jaspinko in the GeoGuessr Remix challenge
+        </a>
+        !
+      </p>
+    );
+  }
+};
+
+export default Promo;

src/index.tsx

@@ -9,13 +9,15 @@ import { render } from 'preact';
 import About from './About';
 import Data from './Data';
 import Game from './Game';
+import Promo from './Promo';
 import Providers from './Providers';
 import Results from './Results';
 import './style.css';
 
 const App = () => (
   <Providers>
     <h1>tpg solver</h1>
+    <Promo />
     <Game />
     <Data />
     <Results />

src/style.css

@@ -207,3 +207,7 @@ a:any-link {
   text-decoration: underline;
   cursor: pointer;
 }
+
+.votenote {
+  color: var(--error-color);
+}