add image svg

resources/js/components/Img.tsx

@@ -0,0 +1,8 @@
+import React, {FC} from "react";
+
+const Img: FC<{src: string, alt: string, width: string}> = ({src, alt, width, ...props}) => {
+
+    return <img src={'/' + src} alt={alt} width={width} {...props} />
+}
+
+export default Img

resources/js/customPrototypes.ts

@@ -1,4 +1,4 @@
-const weekDays = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche']
+const weekDays = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi']
 
 interface Date {
     getWeekDay(): string,
@@ -10,6 +10,5 @@ Date.prototype.toSQLDate = function (): string {
 }
 
 Date.prototype.getWeekDay = function () {
-    const dayIndex = this.getDay() === 0 ? 6 : this.getDay() - 1
-    return weekDays[dayIndex]
+    return weekDays[this.getDay()]
 }

resources/js/pages/Weather.tsx

@@ -1,8 +1,9 @@
 import React, {FC, useEffect, useState} from "react"
 import PageLayout from "../components/PageLayout"
-import useAxiosTools from "../hooks/AxiosTools";
-import {WeatherValue} from "../types";
+import useAxiosTools from "../hooks/AxiosTools"
+import {WeatherValue} from "../types"
 import Card from "../components/Card"
+import Img from "../components/Img"
 
 const Weather = () => {
 
@@ -75,8 +76,10 @@ const Weather = () => {
             </div>
             <div className="flex items-stretch">
                 <div>
-                    {currentWeather && <img src={`http://openweathermap.org/img/wn/${currentWeather?.weather[0].icon}@2x.png`}
-                         alt={currentWeather?.weather[0].main} width="120px" />}
+                    {/*{currentWeather && <img src={`http://openweathermap.org/img/wn/${currentWeather?.weather[0].icon}@2x.png`}*/}
+                    {/*     alt={currentWeather?.weather[0].main} width="120px" />}*/}
+                    {currentWeather && <Img src={`images/icons/${currentWeather?.weather[0].icon}.svg`}
+                                            alt={currentWeather?.weather[0].main} width="120px" />}
                 </div>
                 <div className="flex gap-1 flex-col">
                     <span className="text-4xl pt-5">{currentWeather?.main.temp_max.toFixed()} <span className="text-2xl">°C</span></span>
@@ -146,9 +149,9 @@ const WeatherCard: FC<{date: string, values: WeatherValue[]}> = ({date, values=
             <span className="text-secondary dark:text-secondary-ligth">{weatherState?.description}</span>
         </div>
         <div className="flex items-center -mt-1.5">
-            <img src={`http://openweathermap.org/img/wn/${weatherState?.icon}@2x.png`}
-                 className=""
-                 alt={weatherState?.main + ' ' + weatherState?.icon} width="80px" />
+            <Img src={`images/icons/${weatherState?.icon}.svg`}
+                 alt={weatherState?.main + ' ' + weatherState?.icon}
+                 width="80px" />
 
         </div>
         <div className="flex gap-1 flex-col">