Format

timmo001 · Sep 3, 2024 · 0a13828 · 0a13828
1 parent 46f41a3
commit 0a13828
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 31 deletions.
diff --git a/src/app/_components/forecast-hourly.tsx b/src/app/_components/forecast-hourly.tsx
@@ -39,35 +39,38 @@ export function ForecastHourly() {
     return <span>{forecastHourly.data.code}</span>;
 
   return (
-    <div className="flex max-w-screen-md select-none flex-row gap-4 overflow-y-auto">
-      {forecastHourly.data.map((item) => {
-        const time = dayjs(item.time);
+    <div className="mt-4 flex select-none flex-col items-center gap-1 text-center">
+      <h3 className="text-xl font-semibold">Hourly</h3>
+      <div className="mt-1 flex max-w-screen-md flex-row gap-4 overflow-y-auto">
+        {forecastHourly.data.map((item) => {
+          const time = dayjs(item.time);
 
-        return (
-          <div
-            key={time.toISOString()}
-            className="flex flex-col items-stretch gap-1"
-          >
-            <div className="flex flex-row items-center gap-1">
-              <CloudSun className="h-16 w-16" />
+          return (
+            <div
+              key={time.toISOString()}
+              className="flex flex-col items-stretch gap-1"
+            >
+              <div className="flex flex-row items-center gap-1">
+                <CloudSun className="h-16 w-16" />
+              </div>
+              <div className="flex flex-row items-center gap-1">
+                <span className="text-xl font-bold">
+                  {item.temperature.toFixed(1)}
+                </span>
+                <span className="text-sm font-semibold">°C</span>
+              </div>
+              <div className="flex flex-col items-center">
+                <span className="text-sm font-semibold">
+                  {time.format("ddd")}
+                </span>
+                <span className="text-sm font-semibold">
+                  {time.format("HH:mm")}
+                </span>
+              </div>
             </div>
-            <div className="flex flex-row items-center gap-1">
-              <span className="text-xl font-bold">
-                {item.temperature.toFixed(1)}
-              </span>
-              <span className="text-sm font-semibold">°C</span>
-            </div>
-            <div className="flex flex-col items-center">
-              <span className="text-sm font-semibold">
-                {time.format("ddd")}
-              </span>
-              <span className="text-sm font-semibold">
-                {time.format("HH:mm")}
-              </span>
-            </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
     </div>
   );
 }
diff --git a/src/app/_components/forecast-now.tsx b/src/app/_components/forecast-now.tsx
@@ -41,10 +41,8 @@ export function ForecastNow() {
     return <span>{forecastNow.data.message}</span>;
 
   return (
-    <div className="flex select-none flex-col gap-6">
-      <span className="text-2xl font-semibold">
-        Last updated: {dayjs(forecastNow.data.time).fromNow()}
-      </span>
+    <div className="flex select-none flex-col items-center gap-1 text-center">
+      <h3 className="text-xl font-semibold">Now</h3>
       <div className="flex flex-row items-stretch gap-6">
         <div className="flex flex-row items-center gap-1">
           <CloudSun className="h-24 w-24" />
@@ -56,6 +54,9 @@ export function ForecastNow() {
           <span className="text-2xl font-semibold">°C</span>
         </div>
       </div>
+      <span className="text-sm font-semibold">
+        Last updated: {dayjs(forecastNow.data.time).fromNow()}
+      </span>
     </div>
   );
 }