add tailwindcss and some mock SensorReadingCards

frontend/src/App.tsx

@@ -1,18 +1,83 @@
-// import { createSignal } from 'solid-js'
-// import "./App.css";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+type SensorReading = {
+  val: number;
+  unit: string;
+  when: dayjs.Dayjs;
+  title: string;
+};
+
+const mockSensorReadings: SensorReading[] = [
+  {
+    title: "Temperature",
+    val: 22.5,
+    unit: "°C",
+    when: dayjs().subtract(2, "minute"),
+  },
+  {
+    title: "Humidity",
+    val: 45.3,
+    unit: "%",
+    when: dayjs().subtract(1, "minute"),
+  },
+  { title: "Pressure", val: 1013.25, unit: "hPa", when: dayjs() },
+  {
+    title: "PM 1.0",
+    val: 8.2,
+    unit: "µg/m³",
+    when: dayjs().subtract(30, "second"),
+  },
+  {
+    title: "PM 2.5",
+    val: 12.7,
+    unit: "µg/m³",
+    when: dayjs().subtract(30, "second"),
+  },
+  {
+    title: "PM 10",
+    val: 24.1,
+    unit: "µg/m³",
+    when: dayjs().subtract(45, "second"),
+  },
+];
+
+function SensorReadingCard({ reading }: { reading: SensorReading }) {
+  const fontSize = reading.unit.length > 2 ? "text-4xl" : "text-6xl";
+  return (
+    <div class="rounded-md bg-green-300 p-4 flex flex-col justify-center items-center">
+      <h1 class={`${fontSize} font-sans mb-4`}>
+        {reading.val} {reading.unit}
+      </h1>
+      <hr class="border-t border-black w-full my-2" />
+      <h2>{reading.title}</h2>
+      <p class="text-sm">updated: {reading.when.fromNow()}</p>
+    </div>
+  );
+}
 
 function App() {
   // const [count, setCount] = createSignal(0)
 
   return (
-    <>
-      <header></header>
-      <footer>
-        <a href="https://git.travisshears.com/travisshears/weather-portal">
+    <div class="h-screen flex flex-col">
+      <header class="h-8 bg-pink-100"></header>
+      <main class="h-full grid grid-cols-3 grid-rows-3 gap-8 p-8">
+        {mockSensorReadings.map((reading) => (
+          <SensorReadingCard reading={reading} />
+        ))}
+      </main>
+      <footer class="px-2 h-8 flex items-center text-sm">
+        <a
+          class="underline"
+          href="https://git.travisshears.com/travisshears/weather-portal"
+        >
           Quellcode
         </a>
       </footer>
-    </>
+    </div>
   );
 }