react-life-design
Version:
Life Design UI components
35 lines • 3.23 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_components_1 = require("styled-components");
var TextHelper_1 = require("../../TextHelper");
var days_1 = require("../utils/days");
var months_enum_1 = require("../utils/months.enum");
var seasons_1 = require("../utils/seasons");
var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: #f0f0f0;\n text-align: center;\n padding: 41px;\n\n .date {\n text-transform: uppercase;\n font-family: ", ";\n font-size: 25px;\n line-height: 33px;\n margin: 16px 0 0;\n }\n\n @media screen and (min-width: 768px) {\n float: left;\n max-width: 280px;\n height: 100%;\n }\n"], ["\n background-color: #f0f0f0;\n text-align: center;\n padding: 41px;\n\n .date {\n text-transform: uppercase;\n font-family: ", ";\n font-size: 25px;\n line-height: 33px;\n margin: 16px 0 0;\n }\n\n @media screen and (min-width: 768px) {\n float: left;\n max-width: 280px;\n height: 100%;\n }\n"])), TextHelper_1.default.fontVariant('bold'));
var Season = styled_components_1.default.h3(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n font-family: ", ";\n font-weight: normal;\n\n @media screen and (min-width: 768px) {\n flex-direction: column-reverse;\n }\n\n svg {\n margin-right: 20px;\n\n @media screen and (min-width: 768px) {\n width: 82px;\n height: 117px;\n margin-right: 0;\n margin-top: 10px;\n }\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n font-family: ", ";\n font-weight: normal;\n\n @media screen and (min-width: 768px) {\n flex-direction: column-reverse;\n }\n\n svg {\n margin-right: 20px;\n\n @media screen and (min-width: 768px) {\n width: 82px;\n height: 117px;\n margin-right: 0;\n margin-top: 10px;\n }\n }\n"])), TextHelper_1.default.fontVariant('regular'));
exports.default = (function (_a) {
var dayWeek = _a.dayWeek, day = _a.day, month = _a.month, year = _a.year;
return (React.createElement(Wrapper, null,
React.createElement("p", null,
days_1.DAYS_OF_THE_WEEK[dayWeek],
","),
React.createElement("h2", { className: 'date' },
day,
" de ",
months_enum_1.Months[month],
" de ",
year),
seasons_1.SEASONS
.filter(function (season) { return season.includeMonths.some(function (e) { return e === month; }); })
.map(function (season) { return (React.createElement(Season, { key: Math.random() },
season.icon,
" ",
React.createElement("span", null, season.name))); })));
});
var templateObject_1, templateObject_2;
//# sourceMappingURL=IntroWithSeasons.js.map