\n \n {icon ? (\n \n ) : (\n \n )}\n \n\n \n {icon ? (\n \n ) : (\n \n )}\n \n \n {today && }\n \n);\n\nconst DayBlockWithLink = (\n isCompletable,\n icon,\n day,\n activityPath,\n today,\n date\n) => (\n <>\n {DayBlock(isCompletable, icon, day, today, date)}\n \n);\n\nconst Day = ({ isCompletable, icon, day, activityPath, today, date }) => (\n \n {activityPath\n ? DayBlockWithLink(isCompletable, icon, day, activityPath, today, date)\n : DayBlock(isCompletable, icon, day, today, date)}\n
\n);\n\nDay.defaultProps = {\n icon: null,\n activityPath: null\n};\n\nDay.propTypes = {\n isCompletable: PropTypes.bool.isRequired,\n icon: PropTypes.string,\n day: PropTypes.number.isRequired,\n activityPath: PropTypes.string,\n today: PropTypes.bool.isRequired,\n date: PropTypes.string.isRequired\n};\n\nexport default Day;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"CalendarBody--container--d0LQ5\",\"week\":\"CalendarBody--week--KCtwH\"};","/* eslint-disable react/no-array-index-key */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Day from '../Day';\n\nimport styles from './styles.scss';\n\nconst CalendarBody = ({ isCompletable, weeks }) => (\n \n {weeks.map((week, index) => (\n
\n {week.map((day) => (\n - \n \n
\n ))}\n
\n ))}\n
\n
\n \n {I18n.t(weekI18n)}\n
\n \n {dayKeys.map((day) => (\n - \n {dayString(day, false)}\n
\n ))}\n
\n \n\n
\n \n {I18n.t(weekI18n)}\n
\n \n {dayKeys.map((day) => (\n - \n {dayString(day, true)}\n
\n ))}\n
\n \n\n
\n
\n \n
\n
\n {Object.keys(summary).map(\n (key) =>\n summary[key].title && (\n - \n \n
\n )\n )}\n
\n);\n\nSummary.propTypes = {\n summary: PropTypes.shape({\n calendar: PropTypes.shape({}).isRequired,\n challenge: PropTypes.shape({}).isRequired,\n reward: PropTypes.shape({}).isRequired,\n segment: PropTypes.shape({})\n }).isRequired\n};\n\nexport default Summary;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"TextWithIcon--container--H9e1I\",\"icon\":\"TextWithIcon--icon--xh5nk\",\"text-fields\":\"TextWithIcon--text-fields--ysVcz\",\"textFields\":\"TextWithIcon--text-fields--ysVcz\",\"text\":\"TextWithIcon--text--sAQ9K\",\"subtitle\":\"TextWithIcon--subtitle--5II9Y\",\"trophy\":\"TextWithIcon--trophy--UT3zA\",\"truncate\":\"TextWithIcon--truncate--7nwg3\",\"blank-x-small\":\"TextWithIcon--blank-x-small--iBAxU\",\"blankXSmall\":\"TextWithIcon--blank-x-small--iBAxU\",\"clear-both\":\"TextWithIcon--clear-both--eiUFs\",\"clearBoth\":\"TextWithIcon--clear-both--eiUFs\"};","import React from 'react';\nimport MediaQuery, { breakpoints } from 'utils/media-query';\nimport getIcon from 'utils/icon-mapper';\nimport PropTypes from 'prop-types';\n\nimport {\n AchievementsTrophyHighlightedSmall,\n AchievementsTrophyNormalXsmall,\n ActivitySegmentNormalSmall,\n ActivitySegmentNormalXsmall,\n NavigationCalendarNormalSmall,\n NavigationCalendarNormalXsmall\n} from '@strava/icons';\nimport styles from './styles.scss';\n\nconst renderIcon = (Component, index, fill) => {\n return (\n \n \n
\n );\n};\n\n/* eslint-disable react/no-array-index-key */\nfunction getIcons(iconNames) {\n const iconComponents = [];\n const xSmallBlankIcon = (\n \n );\n iconNames.forEach((iconName, index) => {\n switch (iconName) {\n case 'achievements_trophy_normal_medium':\n iconComponents.push(\n renderIcon(AchievementsTrophyHighlightedSmall, index, '#fec746')\n );\n break;\n case 'activity_segment_normal_medium':\n iconComponents.push(renderIcon(ActivitySegmentNormalSmall, index));\n break;\n case 'navigation_calendar_normal_medium':\n iconComponents.push(renderIcon(NavigationCalendarNormalSmall, index));\n break;\n case 'achievements_trophy_normal_xsmall':\n iconComponents.push(renderIcon(AchievementsTrophyNormalXsmall, index));\n break;\n case 'activity_segment_normal_xsmall':\n iconComponents.push(renderIcon(ActivitySegmentNormalXsmall, index));\n break;\n case 'navigation_calendar_normal_xsmall':\n iconComponents.push(renderIcon(NavigationCalendarNormalXsmall, index));\n break;\n case 'blank_xsmall':\n iconComponents.push(xSmallBlankIcon);\n break;\n default:\n // eslint-disable-next-line no-case-declarations\n const iconComponent = (\n \n {getIcon(iconName)}\n
\n );\n iconComponents.push(iconComponent);\n break;\n }\n });\n return iconComponents;\n}\n\nconst wrapInAnchor = (children, href) => {children};\n\nconst textBlock = (title, subtitles, textClass) => (\n <>\n {/* Bigger screens - tablets & desktop */}\n \n {title}
\n \n\n {/* Smaller screens - mobile */}\n \n {title}
\n \n {subtitles &&\n subtitles.map((subtitle) => (\n \n {subtitle.href\n ? wrapInAnchor(subtitle.text, subtitle.href)\n : subtitle.text}\n \n ))}\n \n);\n\nconst TextWithIcon = ({\n title,\n subtitles,\n icons,\n destinationUrl,\n textClass,\n iconSpace\n}) => (\n \n
{getIcons(icons)}
\n
\n
\n {destinationUrl\n ? wrapInAnchor(textBlock(title, subtitles, textClass), destinationUrl)\n : textBlock(title, subtitles, textClass)}\n