{"version":3,"sources":["components/CategoryBadge/CategoryBadge.js","components/Skeletons/SkeletonImage.js","views/Home/FeaturedContents/FeaturedContentItem.js","views/Home/FeaturedContents/FeaturedContents.js"],"names":["CategoryBadge","slug","children","component","Link","to","variant","size","style","borderRadius","backgroundColor","colors","lightBlue","color","textDecoration","boxShadow","textTransform","fontSize","useStyles","makeStyles","theme","h100","height","icon","SkeletonImage","iconFontSize","classes","width","animation","container","justify","alignItems","className","item","padding","breakpoints","up","categoriesContainer","marginBottom","down","display","title","grey","anchor","position","bottom","left","FeaturedContentItem","content","imageUrl","encodeURI","fullSizeImageUrl","Grid","direction","backgroundImage","spacing","categories","map","c","key","id","name","Typography","border","firstContent","borderLeft","borderRight","borderBottom","secondContent","thirdContent","forthContent","borderTop","withWidth","contentsService","useContentsService","useState","contents","setContents","useEffect","GetFeaturedContents","then","r","render","isWidthUp","xs","clsx"],"mappings":"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","file":"static/js/40.800fc409.chunk.js","sourcesContent":["import React from \"react\";\nimport Button from \"@material-ui/core/Button\";\nimport { Typography } from \"@material-ui/core\";\nimport { colors } from \"../../utility/Themes/colors\";\nimport { Link } from \"react-router-dom\";\n\nfunction CategoryBadge({ slug, children }) {\n  return (\n    <Button\n      component={Link}\n      to={slug}\n      variant=\"contained\"\n      size=\"small\"\n      style={{\n        borderRadius: \"0.3rem\",\n        backgroundColor: colors.lightBlue,\n        color: \"white\",\n        textDecoration: \"none\",\n        boxShadow: \"none\"\n      }}\n    >\n      <Typography variant=\"body2\" style={{ textTransform: \"none\", fontSize: \"0.8rem\" }}>\n        <b>{children}</b>\n      </Typography>\n    </Button>\n  );\n}\n\nexport default CategoryBadge;\n","import React from \"react\";\nimport Skeleton from \"@material-ui/lab/Skeleton\";\nimport Grid from \"@material-ui/core/Grid\";\nimport PanoramaOutlinedIcon from \"@material-ui/icons/PanoramaOutlined\";\nimport { makeStyles } from \"@material-ui/styles\";\n\nconst useStyles = makeStyles(theme => ({\n  h100: {\n    height: \"100%\"\n  },\n\n  icon: {\n    color: \"white\"\n  }\n}));\n\nfunction SkeletonImage({ iconFontSize, height }) {\n  const classes = useStyles();\n\n  return (\n    <Skeleton variant=\"rect\" width=\"100%\" height={height ? height : \"100%\"} animation={false}>\n      <Grid container justify=\"center\" alignItems=\"center\" className={classes.h100}>\n        <Grid item>\n          <PanoramaOutlinedIcon\n            className={classes.icon}\n            style={{ fontSize: iconFontSize ? iconFontSize : \"10rem\" }}\n          />\n        </Grid>\n      </Grid>\n    </Skeleton>\n  );\n}\n\nexport default SkeletonImage;\n","import React from \"react\";\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\nimport Grid from \"@material-ui/core/Grid\";\nimport { Typography } from \"@material-ui/core\";\nimport CategoryBadge from \"../../../components/CategoryBadge/CategoryBadge\";\nimport { Link } from \"react-router-dom\";\nimport { grey } from \"@material-ui/core/colors\";\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    padding: \"1rem\",\n    [theme.breakpoints.up(\"lg\")]: {\n      padding: \"1rem 2rem\"\n    },\n    height: \"100%\",\n    width: \"100%\",\n    backgroundSize: \"cover\",\n    backgroundPositionX: \"center\",\n    backgroundPositionY: \"top\",\n    backgroundRepeat: \"no-repeat\",\n    boxShadow: \"inset 0 -170px 62px -51px rgba(0,0,0,.76)\",\n    textDecoration: \"none\",\n    position: \"relative\",\n    \"&:hover\": {\n      boxShadow: \"inset 0px -170px 62px -51px rgba(0,0,0,0.85)\"\n    }\n  },\n\n  categoriesContainer: {\n    marginBottom: \"0.5rem\",\n    [theme.breakpoints.down(\"xs\")]: {\n      display: \"none\"\n    }\n  },\n\n  title: {\n    color: grey[100]\n  },\n\n  anchor: {\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    display: \"block\",\n    width: \"100%\",\n    height: \"100%\"\n  }\n}));\n\nfunction FeaturedContentItem({ content }) {\n  const classes = useStyles();\n\n  const imageUrl = encodeURI(content.fullSizeImageUrl);\n\n  return (\n    <Grid\n      container\n      direction=\"column\"\n      justify=\"flex-end\"\n      className={classes.container}\n      style={{ backgroundImage: `url(${imageUrl})` }}\n    >\n      <Link to={content.slug} className={classes.anchor} />\n      <Grid container spacing={1} className={classes.categoriesContainer}>\n        {content.categories.map(c => (\n          <Grid key={c.id} item>\n            <CategoryBadge slug={c.slug}>{c.name}</CategoryBadge>\n          </Grid>\n        ))}\n      </Grid>\n      <Grid item>\n        <Typography variant=\"h5\" className={classes.title}>\n          <b>{content.title}</b>\n        </Typography>\n      </Grid>\n    </Grid>\n  );\n}\n\nexport default FeaturedContentItem;\n","import React, { useEffect, useState } from \"react\";\nimport { useContentsService } from \"../../../services/ContentsService\";\nimport Grid from \"@material-ui/core/Grid\";\nimport makeStyles from \"@material-ui/core/styles/makeStyles\";\nimport FeaturedContentItem from \"./FeaturedContentItem\";\nimport clsx from \"clsx\";\nimport withWidth, { isWidthUp } from \"@material-ui/core/withWidth\";\nimport SkeletonImage from \"../../../components/Skeletons/SkeletonImage\";\n\nconst useStyles = makeStyles(theme => ({\n  container: {\n    backgroundColor: \"black\",\n    [theme.breakpoints.up(\"sm\")]: {\n      height: \"31rem\"\n    },\n    [theme.breakpoints.down(\"xs\")]: {\n      \"& > div\": {\n        height: \"15rem\"\n      }\n    }\n  },\n  border: {\n    border: \"0.1rem solid white\"\n  },\n  firstContent: {\n    borderLeft: \"none\",\n    borderRight: \"none\",\n    [theme.breakpoints.down(\"sm\")]: {\n      borderBottom: \"none\"\n    }\n  },\n  secondContent: {\n    borderRight: \"none\",\n    borderBottom: \"none\",\n    [theme.breakpoints.down(\"xs\")]: {\n      borderLeft: \"none\"\n    }\n  },\n  thirdContent: {\n    borderRight: \"none\",\n    [theme.breakpoints.down(\"sm\")]: {\n      borderLeft: \"none\"\n    }\n  },\n  forthContent: {\n    borderRight: \"none\",\n    [theme.breakpoints.down(\"xs\")]: {\n      borderLeft: \"none\",\n      borderTop: \"none\"\n    }\n  }\n}));\n\nfunction FeaturedContents({ width }) {\n  const contentsService = useContentsService();\n  const [contents, setContents] = useState(null);\n\n  const classes = useStyles();\n\n  useEffect(() => {\n    contentsService.GetFeaturedContents().then(r => setContents(r));\n  }, []);\n\n  let render = null;\n\n  // Desktop version\n  if (isWidthUp(\"md\", width)) {\n    render = (\n      <Grid container justify=\"space-between\" spacing={0} className={classes.container}>\n        <Grid item xs={6} className={clsx(classes.border, classes.firstContent)}>\n          {contents ? (\n            <FeaturedContentItem content={contents[0]} />\n          ) : (\n            <SkeletonImage iconFontSize=\"25rem\" />\n          )}\n        </Grid>\n\n        <Grid item xs={6}>\n          <Grid container spacing={0} style={{ height: \"50%\" }}>\n            <Grid item xs className={clsx(classes.border, classes.secondContent)}>\n              {contents ? <FeaturedContentItem content={contents[1]} /> : <SkeletonImage />}\n            </Grid>\n          </Grid>\n          <Grid container spacing={0} style={{ height: \"50%\" }}>\n            <Grid item xs={6} className={clsx(classes.border, classes.thirdContent)}>\n              {contents ? <FeaturedContentItem content={contents[2]} /> : <SkeletonImage />}\n            </Grid>\n            <Grid item xs={6} className={clsx(classes.border, classes.forthContent)}>\n              {contents ? <FeaturedContentItem content={contents[3]} /> : <SkeletonImage />}\n            </Grid>\n          </Grid>\n        </Grid>\n      </Grid>\n    );\n  }\n  // Tablet version\n  else if (isWidthUp(\"sm\", width)) {\n    render = (\n      <Grid container justify=\"space-between\" spacing={0} className={classes.container}>\n        <Grid item xs={6} className={clsx(classes.border, classes.firstContent)}>\n          {contents ? <FeaturedContentItem content={contents[0]} /> : <SkeletonImage />}\n        </Grid>\n\n        <Grid item xs={6} className={clsx(classes.border, classes.secondContent)}>\n          {contents ? <FeaturedContentItem content={contents[1]} /> : <SkeletonImage />}\n        </Grid>\n\n        <Grid item xs={6} className={clsx(classes.border, classes.thirdContent)}>\n          {contents ? <FeaturedContentItem content={contents[2]} /> : <SkeletonImage />}\n        </Grid>\n\n        <Grid item xs={6} className={clsx(classes.border, classes.forthContent)}>\n          {contents ? <FeaturedContentItem content={contents[3]} /> : <SkeletonImage />}\n        </Grid>\n      </Grid>\n    );\n  }\n  // Phone version\n  else if (isWidthUp(\"xs\", width)) {\n    render = (\n      <Grid container spacing={0} className={classes.container}>\n        <Grid item xs={12} className={clsx(classes.border, classes.firstContent)}>\n          {contents ? <FeaturedContentItem content={contents[0]} /> : <SkeletonImage />}\n        </Grid>\n\n        <Grid item xs={12} className={clsx(classes.border, classes.secondContent)}>\n          {contents ? <FeaturedContentItem content={contents[1]} /> : <SkeletonImage />}\n        </Grid>\n\n        <Grid item xs={12} className={clsx(classes.border, classes.thirdContent)}>\n          {contents ? <FeaturedContentItem content={contents[2]} /> : <SkeletonImage />}\n        </Grid>\n\n        <Grid item xs={12} className={clsx(classes.border, classes.forthContent)}>\n          {contents ? <FeaturedContentItem content={contents[3]} /> : <SkeletonImage />}\n        </Grid>\n      </Grid>\n    );\n  }\n\n  return <>{render}</>;\n}\n\nexport default withWidth()(FeaturedContents);\n"],"sourceRoot":""}