SITECORE HEADLESS – Listing Component using Datasource Item Children Resolver

import {
    RichText,
    Field,
    withDatasourceCheck,
    ImageField,
    Image,
  } from '@sitecore-jss/sitecore-jss-nextjs';
import { styled } from '@mui/material/styles';
import { ComponentProps } from 'lib/component-props';
import { xxxText } from '@xxx/yyy.components';
import { xxTheme } from '@xxxx/yyy.theme';
import { SitecoreHeading } from '@fe-jss-nx/sitecore-ui';
  
  type SummaryProps = {
    id: string;
    fields: {  
      SummaryTextField: Field<string>;
      SummaryTextIconField: ImageField;
      HeadingTextField: any;
    };
  };
  type SummaryComponentProps = ComponentProps & {
    fields: {
      items: SummaryProps[];
    };
  };

  const StyledMessagesListCard = styled('div', { name: 'MessagesListCard' })(
    ({
      theme: {
        xxx: { palette, spacing },
      },
    }: {
      theme: xxxTheme;
    }) => ({
      backgroundColor: palette.neutral.background.medium, 
      padding: spacing(600),
      width: '100%'
    })
  );

  const StyledMessagesListItem = styled('div', { name: 'MessagesListItem' })(
    ({
      theme: {
        xxx: { spacing },
      },
    }: {
      theme: xxxTheme;
    }) => ({
      display: 'flex',
      alignItems: 'center',
      gap: spacing(100),
      marginBottom: spacing(100),
    })
  );
  
  const SummaryComponent = ({ fields }: SummaryComponentProps): JSX.Element => (
    <StyledMessagesListCard>
      <SitecoreHeading.H2 fields={{HeadingTextField: fields.items[0].fields.HeadingTextField}} params={{}}  />      
      <div className="sc-cards">{fields?.items?.map((card) => card && <Card {...card} />)}</div>
    </StyledMessagesListCard>
  );
  
  const Card = ({ fields, id }: SummaryProps): JSX.Element => (
    <div className="sc-card" key={id}>
      <StyledMessagesListItem>
        <Image field={fields.SummaryTextIconField} />
        <xxxText size='bodySm' component='div'>
          <RichText field={fields.SummaryTextField} tag="p" />
        </xxxText>     
      </StyledMessagesListItem>
      
    </div>
  );
  
  export default withDatasourceCheck()<SummaryComponentProps>(SummaryComponent);