hazemKrimi/react-weather-app
1
0
Fork 0
mirror of https://github.com/hazemKrimi/react-weather-app.git synced 2026-05-01 18:30:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update card styles and content

Browse Source
This commit is contained in:
Hazem Krimi
2021-01-21 19:54:17 +01:00
parent 40467e5709
commit 90b7bea1bd
1 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Card.tsx
+47 -39
View File
@@ -2,50 +2,58 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
const Wrapper = styled.div` const Wrapper = styled.div`
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
display: grid; display: grid;
grid-template-rows: auto; grid-template-rows: auto;
row-gap: 0.5rem; row-gap: 0.5rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 1rem; width: 100%;
margin: 1rem 0rem; padding: 1rem;
margin: 1rem 0rem;
i { i {
font-size: 5rem; font-size: 5rem;
} }
.cold { .cold {
color: #429BB8; color: #429bb8;
} }
.hot { .hot {
color: #FF4500; color: #ff4500;
} }
`; `;
interface Props { interface Props {
date: Date, date: Date;
data: string, data: string;
icon: number, icon: number;
time: boolean, time: boolean;
temp?: 'hot' | 'cold' | null, temp?: 'hot' | 'cold' | null;
description?: string description?: string;
};
const Card: React.FC<Props> = ({ date, time, data, temp, icon, description }) => {
const timeString: string = `${date.getHours() < 10 ? 0 : ''}${date.getHours()}:${date.getMinutes() < 10 ? 0 : ''}${date.getMinutes()}`;
return (
<Wrapper>
<p>{time ? timeString : ''} {date.toDateString().split(' ')[0]} {date.getDate() + '/' + (date.getMonth() + 1)}</p>
<h3>{data}</h3>
<i className={`wi wi-owm-${icon} ${temp && temp}`} ></i>
<p>{description && description}</p>
</Wrapper>
);
} }
export default Card; const Card: React.FC<Props> = ({ date, time, data, temp, icon, description }) => {
const timeString: string = `${date.getHours() < 10 ? 0 : ''}${date.getHours()}:${
date.getMinutes() < 10 ? 0 : ''
}${date.getMinutes()}`;
return (
<Wrapper>
<p>
{date.toDateString().split(' ')[0]} {time ? timeString : ''}{' '}
{(date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth()) +
'/' +
date.getDate()}
</p>
<h3>{data}</h3>
<i className={`wi wi-owm-${icon} ${temp && temp}`}></i>
<p>{description && description}</p>
</Wrapper>
);
};
export default Card;