{"version":3,"sources":["components/Apartment/ApartmentSimilarProperties/styles.js","components/Apartment/ApartmentSimilarProperties/index.tsx"],"names":["SimilarWrapper","div","gutterSmall","md","lg","gutter","H2","SimilarContainer","props","ref","onScreen","title","properties","map","property","ApartmentBlock","key","data","small"],"mappings":"kZAGO,IAAMA,EAAiB,IAAOC,IAAV,wCAAG,CAAH,gHACN,YAAM,OAAQ,GAElB,IAAKC,YAAc,EAEjC,IAAMC,GALkB,KASxB,IAAMC,GATkB,IAWT,IAAKC,OAAS,GAI5B,IAAWC,IAMFC,EAAmB,IAAON,IAAV,wCAAG,CAAH,koCASV,IAAKC,YAGM,IAAKA,YAAc,EAC7B,IAAKA,YAAc,EAIR,IAAKA,YAAc,EAAK,IAIxB,IAAKG,OAAS,EAAK,EAC9B,IAAKA,OAAS,EAIH,IAAKA,OAAS,EAAK,EAQ3B,IAAKH,YAAc,EASnB,IAAKG,OAAS,EAYnB,IAAKH,YAAc,EAClB,IAAKA,YAAc,EAQnB,IAAKA,YAAc,EAGnB,IAAKA,YAAc,EAItB,IAAKA,YAAc,EAEtB,IAAKA,YAAc,GCjEjB,0BArBoB,SAACM,GACnC,IAAMC,EAAM,iBAAO,MACbC,EAAW,YAAYD,EAAK,SAElC,OACC,kBAACT,EAAD,CAAgBS,IAAKA,GACpB,4BAAKD,EAAMG,MAAQH,EAAMG,MAAQ,2BAChCD,GACA,kBAACH,EAAD,KACEC,EAAMI,WAAWC,KAAI,SAAAC,GAAQ,OAC7B,kBAACC,EAAA,EAAD,CAAgBC,IAAKF,EAASE,IAAKC,KAAMH,EAAUI,OAAO,OAG3D,8BACA","file":"assets/js/64.chunk.js?cb=a2d6774e58669065c7cf","sourcesContent":["import styled from \"styled-components\";\nimport { color, media, grid, textStyles } from \"@utils/style-utils\";\n\nexport const SimilarWrapper = styled.div`\n\tbackground-color: ${color(\"grey\", 7)};\n\tmargin: 80px 0;\n\tpadding: 80px ${grid.gutterSmall / 2}px;\n\n\t${media.md`\n\t\tmargin: 100px 0;\n\t`}\n\n\t${media.lg`\n\t\tmargin: 130px 0;\n\t\tpadding: 80px ${grid.gutter / 2}px;\n\t`}\n\n\th2 {\n\t\t${textStyles.H2}\n\t\tmargin: 0 auto 55px;\n\t\ttext-align: center;\n\t}\n`;\n\nexport const SimilarContainer = styled.div`\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tjustify-content: space-between;\n\tmargin: 0 auto;\n\tmax-width: 1635px;\n\n\t> div {\n\t\tflex-basis: 100%;\n\t\tmargin-bottom: ${grid.gutterSmall}px;\n\n\t\t@media (min-width: 610px) {\n\t\t\tflex-basis: calc((100% - ${grid.gutterSmall / 2}px) / 2);\n\t\t\tmargin-bottom: ${grid.gutterSmall / 2}px;\n\t\t}\n\n\t\t@media (min-width: 940px) {\n\t\t\tflex-basis: calc((100% - ${(grid.gutterSmall / 2) * 1.5}px) / 3);\n\t\t}\n\n\t\t@media (min-width: 1215px) {\n\t\t\tflex-basis: calc((100% - ${(grid.gutter / 2) * 3}px) / 4);\n\t\t\tmargin-bottom: ${grid.gutter / 2}px;\n\t\t}\n\n\t\t@media (min-width: 1500px) {\n\t\t\tflex-basis: calc((100% - ${(grid.gutter / 2) * 4}px) / 5);\n\t\t}\n\t}\n\n\t@supports (display: grid) {\n\t\t.is-pointer & {\n\t\t\t@media (min-width: 610px) {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-column-gap: ${grid.gutterSmall / 2}px;\n\t\t\t\tgrid-template-columns: repeat(2, 1fr);\n\t\t\t}\n\n\t\t\t@media (min-width: 940px) {\n\t\t\t\tgrid-template-columns: repeat(3, 1fr);\n\t\t\t}\n\n\t\t\t@media (min-width: 1215px) {\n\t\t\t\tgrid-column-gap: ${grid.gutter / 2}px;\n\t\t\t\tgrid-template-columns: repeat(4, 1fr);\n\t\t\t}\n\n\t\t\t@media (min-width: 1500px) {\n\t\t\t\tgrid-template-columns: repeat(5, 1fr);\n\t\t\t}\n\t\t}\n\t}\n\n\t@media (max-width: 991px) and (pointer: coarse) {\n\t\tflex-wrap: nowrap;\n\t\tmargin-left: -${grid.gutterSmall / 2}px;\n\t\tmargin-right: -${grid.gutterSmall / 2}px;\n\t\toverflow-x: scroll;\n\t\t-webkit-overflow-scrolling: touch;\n\t\twhite-space: nowrap;\n\t\twidth: auto;\n\n\t\t> div {\n\t\t\tflex: 1 0 86%;\n\t\t\tmargin-right: ${grid.gutterSmall / 2}px;\n\n\t\t\t&:first-of-type {\n\t\t\t\tmargin-left: ${grid.gutterSmall / 2}px;\n\t\t\t}\n\n\t\t\t&:nth-last-of-type(2) {\n\t\t\t\tflex: 0 0 ${grid.gutterSmall / 2}px;\n\t\t\t\tmargin: 0 !important;\n\t\t\t\twidth: ${grid.gutterSmall / 2}px;\n\t\t\t}\n\n\t\t\t&:nth-last-of-type(2),\n\t\t\t&:last-of-type {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n`;\n","import React, { memo, useRef } from \"react\";\nimport ApartmentBlock from \"@components/ApartmentBlock\";\nimport useOnScreen from \"@hooks/use-on-screen\";\n\nimport { SimilarWrapper, SimilarContainer } from \"./styles\";\n\ninterface IProps {\n\tproperties: IProperty[];\n\ttitle?: string;\n}\n\nconst ApartmentSimilarProperties = (props: IProps) => {\n\tconst ref = useRef(null);\n\tconst onScreen = useOnScreen(ref, \"-60px\");\n\n\treturn (\n\t\t<SimilarWrapper ref={ref}>\n\t\t\t<h2>{props.title ? props.title : \"Samankaltaisia kohteita\"}</h2>\n\t\t\t{onScreen && (\n\t\t\t\t<SimilarContainer>\n\t\t\t\t\t{props.properties.map(property => (\n\t\t\t\t\t\t<ApartmentBlock key={property.key} data={property} small={true} />\n\t\t\t\t\t))}\n\t\t\t\t\t{/* these empty divs make the grid work without nth-child \"hacks\" */}\n\t\t\t\t\t<div />\n\t\t\t\t\t<div />\n\t\t\t\t</SimilarContainer>\n\t\t\t)}\n\t\t</SimilarWrapper>\n\t);\n};\n\nexport default memo(ApartmentSimilarProperties);\n"],"sourceRoot":""}