format code

This commit is contained in:
Romulus21
2024-05-25 15:54:46 +02:00
parent 64e99676ab
commit ad65ea2e35
2 changed files with 32 additions and 17 deletions

View File

@@ -39,7 +39,7 @@ const RainfallGraph = () => {
return <PageLayout>
{errorLabel()}
<div className="mx-5 mb-2 flex items-center justify-between">
<div className="mx-5 mb-2 flex items-center justify-between flex-col md:flex-row gap-5">
<form className="flex flex-wrap gap-2">
<Field name="start_date"
type="date"

View File

@@ -1,4 +1,4 @@
import React, {FC, useEffect, useState} from "react"
import React, {FC, Dispatch, SetStateAction, useEffect, useState} from "react"
import PageLayout from "../components/PageLayout"
import useAxiosTools from "../hooks/AxiosTools"
import {WeatherValue} from "../types"
@@ -71,7 +71,8 @@ const Weather = () => {
<Card className={`flex justify-between ${loading ? 'animate-pulse' : ''}`}>
<div className="m-2 flex flex-col justify-between">
<span className="text-6xl">{currentWeather?.main.temp.toFixed() ?? '--'} °C</span>
<span className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span>
<span
className="text-secondary dark:text-secondary-ligth">{currentWeather?.weather[0].description}</span>
</div>
<div className="flex items-stretch">
<div>
@@ -81,8 +82,10 @@ const Weather = () => {
alt={currentWeather?.weather[0].main} width="120px"/>}
</div>
<div className="flex flex-col gap-1">
<span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <span className="text-2xl">°C</span></span>
<span className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span>
<span className="pt-5 text-4xl">{currentWeather?.main.temp_max.toFixed() ?? '--'} <span
className="text-2xl">°C</span></span>
<span
className="mt-2 text-2xl text-secondary dark:text-secondary-ligth">{currentWeather?.main.temp_min.toFixed() ?? '--'} °C</span>
</div>
</div>
</Card>
@@ -97,7 +100,13 @@ export default Weather
const WeatherCard: FC<{ date: string, values: WeatherValue[] }> = ({date, values = []}) => {
const [weatherState, setWeatherState] = useState<{main: string, description: string, icon: string, min: number, max: number}|null>(null)
const [weatherState, setWeatherState] = useState<{
main: string,
description: string,
icon: string,
min: number,
max: number
} | null>(null)
const [showDetails, setShowDetails] = useState(false)
useEffect(() => {
@@ -166,7 +175,7 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
</>
}
const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values: WeatherValue[]}> = ({showDetails, closeDetails, values}) => {
const WeatherDetails: FC<WeatherDetailsProps> = ({showDetails, closeDetails, values}) => {
return <ul onClick={closeDetails}
className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
@@ -186,3 +195,9 @@ const WeatherDetails: FC<{showDetails: boolean, closeDetails: () => void, values
</li>)}
</ul>
}
interface WeatherDetailsProps {
showDetails: boolean,
closeDetails: Dispatch<SetStateAction<boolean>>,
values: WeatherValue[],
}