<commit_before>import React from 'react'
import { Card, CardContent, Heading, themeSpacing, themeColor } from '@datapunt/asc-ui'
import styled from '@datapunt/asc-core'
import useFromCMS from '../../utils/useFromCMS'
import { cmsConfig } from '../../../shared/config/config'
import EditorialCard from '../EditorialCard'

const StyledCard = styled(Card)`
  border-top: 2px solid;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  background-color: ${themeColor('tint', 'level2')}
    // Override the margin-bottom of the Card component when used in a CardContainer
    && {
    margin-bottom: 0px;
  }
`

const StyledCardContent = styled(CardContent)`
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`

const StyledHeading = styled(Heading)`
  margin: ${themeSpacing(3, 0, 6)};
`

const CardList = ({ title }) => {
  const { results, fetchData, loading } = useFromCMS(cmsConfig.HOME_HIGHLIGHT, undefined)

  React.useEffect(() => {
    ;(async () => {
      await fetchData()
    })()
  }, [])

  return (
    <StyledCard isLoading={loading}>
      <StyledCardContent>
        <StyledHeading $as="h4" styleAs="h3">
          {title}
        </StyledHeading>
        <div>
          {results &&
            results.map(result => (
              <EditorialCard
                {...{
                  to: result.type,
                  specialType: result.specialType,
                  title: result.title,
                  image: result.teaserImage,
                  imageDimensions: [44, 44],<commit_msg>Move the list that should be fetched one level up<commit_after>import React from 'react'
import { Card, CardContent, Heading, themeSpacing, themeColor } from '@datapunt/asc-ui'
import styled from '@datapunt/asc-core'
import useFromCMS from '../../utils/useFromCMS'
import EditorialCard from '../EditorialCard'

const StyledCard = styled(Card)`
  border-top: 2px solid;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  background-color: ${themeColor('tint', 'level2')}
    // Override the margin-bottom of the Card component when used in a CardContainer
    && {
    margin-bottom: 0px;
  }
`

const StyledCardContent = styled(CardContent)`
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`

const StyledHeading = styled(Heading)`
  margin: ${themeSpacing(3, 0, 6)};
`

const CardList = ({ title, list }) => {
  const { results, fetchData, loading } = useFromCMS(list, undefined)

  React.useEffect(() => {
    ;(async () => {
      await fetchData()
    })()
  }, [])

  return (
    <StyledCard isLoading={loading}>
      <StyledCardContent>
        <StyledHeading $as="h4" styleAs="h3">
          {title}
        </StyledHeading>
        <div>
          {results &&
            results.map(result => (
              <EditorialCard
                {...{
                  to: result.type,
                  specialType: result.specialType,
                  title: result.title,
                  image: result.teaserImage,
                  imageDimensions: [44, 44],
{'fraction_non_alphanumeric': 0.13648041104688505, 'fraction_numerical': 0.014129736673089274, 'mean_word_length': 2.5277463193657983, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5923975', 'n_tokens_mistral': 1021, 'n_tokens_neox': 959, 'n_words': 233}