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
+46 -38
View File
@@ -2,50 +2,58 @@ import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div`
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
display: grid;
grid-template-rows: auto;
row-gap: 0.5rem;
justify-content: center;
align-items: center;
text-align: center;
padding: 1rem;
margin: 1rem 0rem;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
display: grid;
grid-template-rows: auto;
row-gap: 0.5rem;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
padding: 1rem;
margin: 1rem 0rem;
i {
font-size: 5rem;
}
i {
font-size: 5rem;
}
.cold {
color: #429BB8;
}
.cold {
color: #429bb8;
}
.hot {
color: #FF4500;
}
.hot {
color: #ff4500;
}
`;
interface Props {
date: Date,
data: string,
icon: number,
time: boolean,
temp?: 'hot' | 'cold' | null,
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>
);
date: Date;
data: string;
icon: number;
time: boolean;
temp?: 'hot' | 'cold' | null;
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>
{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;