1 | import * as React from 'react';
|
2 | import styled from 'styled-components';
|
3 |
|
4 | import TextHelper from '../../TextHelper';
|
5 |
|
6 | import { DAYS_OF_THE_WEEK } from '../utils/days';
|
7 | import { Months } from '../utils/months.enum';
|
8 | import { SEASONS } from '../utils/seasons';
|
9 |
|
10 | interface IProps {
|
11 | dayWeek: number;
|
12 | day: number;
|
13 | month: number;
|
14 | year: number;
|
15 | }
|
16 |
|
17 | const Wrapper = styled.div`
|
18 | background-color: #f0f0f0;
|
19 | text-align: center;
|
20 | padding: 41px;
|
21 |
|
22 | .date {
|
23 | text-transform: uppercase;
|
24 | font-family: ${TextHelper.fontVariant('bold')};
|
25 | font-size: 25px;
|
26 | line-height: 33px;
|
27 | margin: 16px 0 0;
|
28 | }
|
29 |
|
30 | @media screen and (min-width: 768px) {
|
31 | float: left;
|
32 | max-width: 280px;
|
33 | height: 100%;
|
34 | }
|
35 | `;
|
36 |
|
37 | const Season = styled.h3`
|
38 | display: inline-flex;
|
39 | align-items: center;
|
40 | justify-content: space-between;
|
41 | font-family: ${TextHelper.fontVariant('regular')};
|
42 | font-weight: normal;
|
43 |
|
44 | @media screen and (min-width: 768px) {
|
45 | flex-direction: column-reverse;
|
46 | }
|
47 |
|
48 | svg {
|
49 | margin-right: 20px;
|
50 |
|
51 | @media screen and (min-width: 768px) {
|
52 | width: 82px;
|
53 | height: 117px;
|
54 | margin-right: 0;
|
55 | margin-top: 10px;
|
56 | }
|
57 | }
|
58 | `;
|
59 |
|
60 | export default ({ dayWeek, day, month, year }: IProps) => (
|
61 | <Wrapper>
|
62 | <p>{DAYS_OF_THE_WEEK[dayWeek]},</p>
|
63 | <h2 className='date'>{day} de {Months[month]} de {year}</h2>
|
64 | { SEASONS
|
65 | .filter(season => season.includeMonths.some(e => e === month))
|
66 | .map(season => (
|
67 | <Season key={Math.random()}>{season.icon} <span>{season.name}</span></Season>
|
68 | )
|
69 | )}
|
70 | </Wrapper>
|
71 | ); |
\ | No newline at end of file |