diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 247ee0d..9de7448 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -41,7 +41,7 @@ const ModalContainer = styled.div` display: flex; flex-direction: column; border-radius: 5px; - padding: 30px 30px; + padding: 10px 15px; border: 1px solid white; background-color: white; position: relative; @@ -68,7 +68,9 @@ const ButtonboxStyle = styled.div` ` const InfoContainerStyle = styled.div` - + display: flex; + flex-direction: column; + align-items: center; ` const WeatherContainerStyle = styled.div` @@ -80,8 +82,9 @@ const WeatherDivStyle = styled.div` ` const ImageStyle = styled.div` - width: 300px; - height: 150px; + width: 280px; + height: 130px; + margin-bottom: 5px; background-image: url(${props => props.url}); background-position: center; background-repeat: no-repeat; @@ -92,6 +95,9 @@ const ImageStyle = styled.div` const Modal = ({ title, latlng, onClick }: ModalProps) =>{ const [weatherData, setWeatherData] = useState(null); const [camnum, setCamnum] = useState(2); + const [date, setDate] = useState(""); + const [time, setTime] = useState(""); + const [percentage, setPercentage] = useState(""); const [imgurl, setImgurl] = useState(""); useEffect(() => { @@ -121,6 +127,12 @@ const Modal = ({ title, latlng, onClick }: ModalProps) =>{ }); }, [camnum]) + useEffect(() => { + setDate(imgurl.substring(68, 76)) + setTime(imgurl.substring(77, 83)) + setPercentage(imgurl.substring(89, 91)) + }, [imgurl]) + const getWindDirection = (deg: number) => { const directions = ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest']; const value = Math.floor((deg + 22.5) / 45); @@ -162,6 +174,9 @@ const Modal = ({ title, latlng, onClick }: ModalProps) =>{ )} . +
Date : {date}
+
Time : {time}
+
Percentage : {percentage} %