content: import React from 'react';
  
  import Typography from './Typography';
  import Scroller from './Scroller';
  import DashboardArticle from './DashboardArticle';
  import GameSection, { GameSectionHeader } from './GameSection';
  import Button from './Button';
  import Skeleton, { Item } from './SkeletonNew';
  
  const GameArticles = ({ count, game, articles, ...rest }) => {
    return (
      <GameSection>
        <GameSectionHeader>
          <Typography is="h2" variant="no-spacing">
            Recent News
          </Typography>
          <Button
            href="/games/[slug]/news"
            as={`/games/${game.fieldGameSlug}/news`}
          >
            View All News
          </Button>
        </GameSectionHeader>
        <Scroller>
          {articles.fetching ? (
            <Skeleton
              count={count}
              dir="horizontal"
              left={<Item type="image" size="small" width={32} />}
              right={
                <>
                  <Item />
                  <Item />
                </>
              }
            />
          ) : (
            articles.data.map(article => (
              <DashboardArticle
                article={article}
                key={article.id}
                hasBorder={false}
                style={{ marginBottom: 0 }}
              />
            ))
          )}
        </Scroller>
      </GameSection>
    );
  };
  
  export default GameArticles;
  