diff --git a/frontend/.yarn/install-state.gz b/frontend/.yarn/install-state.gz new file mode 100644 index 0000000..ac6d2f1 Binary files /dev/null and b/frontend/.yarn/install-state.gz differ diff --git a/frontend/package.json b/frontend/package.json index d571287..f28109c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -9,7 +9,10 @@ "preview": "vite preview" }, "dependencies": { - "solid-js": "^1.9.11" + "@tailwindcss/vite": "^4.2.2", + "dayjs": "^1.11.20", + "solid-js": "^1.9.11", + "tailwindcss": "^4.2.2" }, "devDependencies": { "@types/node": "^24.12.0", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 002a47d..ab61ae0 100644 --- a/frontend/src/App.tsx +++ b/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 ( +
+

+ {reading.val} {reading.unit} +

+
+

{reading.title}

+

updated: {reading.when.fromNow()}

+
+ ); +} function App() { // const [count, setCount] = createSignal(0) return ( - <> -
-