contiago-toolbar/app/components/RandomArticleList/index.js

One of the options for outputting content from contiago xml-server

import React from 'react';
import PropTypes from 'prop-types';
import { convertImagePathToUrl } from 'utils/imagesUtil';
import Truncate from 'react-truncate';
import LogoImage from 'images/logo.png';
import Logo from './components/Logo';
import RandomArtilce from './components/RandomArticle';
import Container from './components/Container';
import Footer from './components/Footer';
import Wrapper from './components/Wrapper';
import MainHeadlineWrapper from './components/MainHeadlineWrapper';
import MainHeadline from './components/MainHeadline';
import HeadlineWrapper from './components/HeadlineWrapper';
import Headline from './components/Headline';

const RandomArtilceList = ({ articles, toolbarConfig, push, clickHandler }) => {
  const articleList = articles.map((item) => (
    <RandomArtilce
      key={item.id}
      teaserText={item.introduction}
      headline={item.headline}
      push={push}
      clickHandler={clickHandler}
      id={item.id}
      imageSrc={
        item.images && item.images.length
          ? convertImagePathToUrl(item.images[0].path, '30x30')
          : null
      }
    />
  ));
  return (
    <Wrapper>
      <MainHeadlineWrapper>
        <MainHeadline>
          <Truncate lines={3} ellipsis={<span>...</span>}>
            {toolbarConfig.pageHeadline}
          </Truncate>
        </MainHeadline>
        <Logo
          src={
            'https://cdn.jsdelivr.net/npm/contiago-toolbar@latest/app/images/logo.png'
          }
          onClick={clickHandler}
        />
      </MainHeadlineWrapper>
      <Container>
        <HeadlineWrapper>
          <Headline>
            <Truncate lines={2} ellipsis={<span>...</span>}>
              {toolbarConfig.headline}
            </Truncate>
          </Headline>
        </HeadlineWrapper>
        {articleList}
      </Container>
      <Footer onClick={clickHandler}>Alle Beiträge anzeigen</Footer>
    </Wrapper>
  );
};

RandomArtilceList.propTypes = {
  articles: PropTypes.array,
  toolbarConfig: PropTypes.object,
  push: PropTypes.func,
  clickHandler: PropTypes.func,
};

export default RandomArtilceList;