{"version":3,"file":"modern.badge-detail.D4M6X241.js","names":[],"sources":["../../../../../../owl-nest/external/owl-kit/src/legacy/Badge.jsx","../../../../../../owl-nest/external/owl-kit/src/legacy/UserCard.jsx","../../src/modern/features/badges/detail/components/Header.js","../../src/modern/features/badges/detail/services.js","../../src/modern/features/badges/detail/components/MoreBadges.js","../../src/modern/features/badges/detail/App.js","../../src/modern/features/badges/detail/index.js"],"sourcesContent":["import * as React from 'react'\nimport * as PropTypes from 'prop-types'\nimport { styled } from 'next-yak'\n\nimport { Title2 } from './Titles.js'\nimport TextEllipsis from '../core/TextEllipsis.js'\n\nimport * as colors from '../constants/colors.ts'\nimport * as effects from '../constants/effects.ts'\nimport * as fonts from '../constants/fonts.js'\n\nconst BadgeWrapper = styled.a`\n max-width: 300px;\n min-width: 230px;\n flex: 1 1 auto;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: black;\n border: 1px solid ${colors.PRIMARY_SAND_200};\n min-height: 308px;\n position: relative;\n\n &:hover {\n transition: all 200ms ease-in-out;\n box-shadow: ${effects.SHADOW_4};\n }\n`\n\nconst BadgeContent = styled.div`\n border-top: none;\n padding: 15px;\n position: relative;\n padding-bottom: 35px;\n`\n\nconst BadgeTitle = styled(Title2)`\n color: ${(props) => props.color};\n font-size: 18px;\n font-weight: 500;\n line-height: 21px;\n text-align: center;\n margin: 0;\n`\n\nconst BadgeInfos = styled.div`\n position: absolute;\n background-color: ${(props) => props.color};\n color: ${colors.PRIMARY_GREY_000};\n padding: 4px 14px;\n border-radius: 1px;\n left: 50%;\n bottom: -5px;\n font-family: ${fonts.PRIMARY_FONT};\n transform: translateX(-50%);\n\n span {\n font-size: 12px;\n font-weight: bold;\n line-height: 18px;\n }\n\n svg {\n height: 12px;\n margin-top: -1px;\n margin-right: 5px;\n }\n`\n\nconst BadgeDescription = styled.p`\n font-size: 15px;\n font-weight: 300;\n line-height: 20px;\n text-align: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: ${fonts.PRIMARY_FONT};\n`\n\nconst BadgeIcon = styled.div`\n background-color: ${(props) => props.color};\n display: flex;\n justify-content: center;\n align-items: center;\n height: 165px;\n\n img {\n width: 130px;\n height: 130px;\n }\n`\n\n/** Badge component is used for badges on user page */\nconst Badge = ({ name, icon, description, color, total, url, className }) => (\n \n
{t('Catch them all')}
\n