[feat] Make click toggle text off for mobile

client/src/app/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { Dispatch, SetStateAction, useEffect, useState } from "react"
 import Image from "next/image"
 import { ColorRing } from "react-loader-spinner"
 import {
@@ -14,21 +14,30 @@ import { getRows } from "./api"
 import sun from "../../public/sun.svg"
 import moon from "../../public/moon.svg"
 
-const Row = (props: { row: Row; colourMap: ColourMap }) => {
+const Row = (props: {
+    row: Row
+    colourMap: ColourMap
+    selected: boolean
+    setSelected: (b: boolean) => void
+}) => {
     let colour = getColour(props.row.temperature, props.colourMap)
     let padding = props.row.is_day ? "h-10 py-3" : "h-8 py-2"
     let svgPath = props.row.is_day ? sun : moon
     let svgAlt = props.row.is_day ? "Sun" : "Moon"
-    const [isHover, setHover] = useState(false)
+    const [clicked, setClicked] = useState(false)
     return (
         <div className="flex flex-row align-center content-center leading-none">
             {}
             <div
                 className={`flex flex-row flex-1 ${colour.code} text-center ${padding} px-4`}
-                onMouseOver={(e) => setHover(true)}
-                onMouseLeave={(e) => setHover(false)}
+                onMouseOver={(e) => props.setSelected(true)}
+                onMouseLeave={(e) => props.setSelected(false)}
+                onClick={(e) => {
+                    props.setSelected(!clicked)
+                    setClicked(!clicked)
+                }}
             >
-                {isHover ? (
+                {props.selected ? (
                     <div className="w-mobileContent flex flex-row m-auto">
                         <div>{getRowDateString(props.row)}</div>
                         <Image
@@ -53,13 +62,23 @@ const Row = (props: { row: Row; colourMap: ColourMap }) => {
 
 const Rows = (props: { rows: Row[] }) => {
     const [colours, setColours] = useState<ColourMap>(defaultColourMap)
+    const [selectedRow, setSelectedRow] = useState<Row | undefined>(undefined)
+    const toggleSelectedRow = (r: Row, b: boolean) => {
+        if (!b && selectedRow === r) {
+            setSelectedRow(undefined)
+        } else if (b) {
+            setSelectedRow(r)
+        }
+    }
     return (
         <div className="flex flex-col w-full">
             {props.rows.map((r) => (
                 <Row
                     key={r.actual_datetime.getTime()}
                     row={r}
                     colourMap={colours}
+                    selected={selectedRow === r}
+                    setSelected={(b: boolean) => toggleSelectedRow(r, b)}
                 />
             ))}
         </div>