Romain/lara-bermite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add update package & weather details

Browse Source
This commit is contained in:
Romulus21
2024-04-22 23:50:59 +02:00
parent 2f2077497d
commit 49f0abd08c
9 changed files with 1038 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
resources/js/pages/Weather.tsx
View File

@@ -98,6 +98,7 @@ 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 [showDetails, setShowDetails] = useState(false)
useEffect(() => {
const weatherState = {
@@ -142,20 +143,39 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
}
}, [])
return <div className="flex gap-5">
<div className="flex h-full flex-1 flex-col gap-2">
<span className="text-lg font-bold" title={(new Date(date)).toLocaleDateString()}>{(new Date(date)).getWeekDay()}</span>
<span className="text-secondary dark:text-secondary-ligth">{weatherState?.description}</span>
</div>
<div className="-mt-1.5 flex items-center">
<Img src={`images/icons/${weatherState?.icon}.svg`}
alt={weatherState?.main + ' ' + weatherState?.icon}
width="80px" />
return <>
<div className="flex gap-5" onClick={(() => setShowDetails(!showDetails))}>
<div className="flex h-full flex-1 flex-col gap-2">
<span className="text-lg font-bold"
title={(new Date(date)).toLocaleDateString()}>{(new Date(date)).getWeekDay()}</span>
<span className="text-secondary dark:text-secondary-ligth">{weatherState?.description}</span>
</div>
<div className="-mt-1.5 flex items-center">
<Img src={`images/icons/${weatherState?.icon}.svg`}
alt={weatherState?.main + ' ' + weatherState?.icon}
width="80px"/>
</div>
<div className="flex flex-col gap-1">
<span className="text-lg">{weatherState?.max.toFixed()} °C</span>
<span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
</div>
</div>
<div className="flex flex-col gap-1">
<span className="text-lg">{weatherState?.max.toFixed()} °C</span>
<span className="text-secondary dark:text-secondary-ligth">{weatherState?.min.toFixed()} °C</span>
</div>
</div>
<ul className={`${showDetails ? 'h-44 opacity-100' : 'h-0 opacity-0'} flex gap-2 overflow-hidden overflow-x-auto transition-all`}>
{values.map(value => <li key={value.dt} className="w-40">
<div className="text-center">{Number(value.dt_txt.split(' ')[1].split(':')[0])} h</div>
<div>
<Img src={`images/icons/${value.weather[0].icon.replace('n', 'd')}.svg`}
alt={weatherState?.main + ' ' + weatherState?.icon}
width="80px"/>
</div>
<div className="text-center">
<span className="font-bold">
{value.main.temp}
</span> °C
</div>
{value.weather[0].description}
</li>)}
</ul>
</>
}