{"size": 2021, "ext": "js", "max_stars_repo_path": "src/components/content/ListingRow.js", "max_stars_repo_name": "embergardens/ember-gardens-com", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/content/ListingRow.js", "max_issues_repo_name": "embergardens/ember-gardens-com", "max_issues_repo_issues_event_min_datetime": "2021-11-07T21:54:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-26T17:30:20.000Z", "max_forks_repo_path": "src/components/content/ListingRow.js", "max_forks_repo_name": "embergardens/ember-gardens-com", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 29.2898550725, "max_line_length": 173, "alphanum_fraction": 0.4873824839}
import React from "react"
import Link from "../navigation/Link"

import { IconArrowDouble } from '../icons/IconArrowDouble'

export const ListingRow = ({ rows }) => {

   const listings = rows.map( ( row, index ) => {
      const { label, featuredTile, listingTiles } = row

      const tiles = listingTiles.map( (tile, index) => <ListingTile tile={ tile } key={ `${tile.title}-${index}`} label={ label } /> )

      return (
         <div className="listingRow" key={`${label}-${index}`}>
            { label &&
               <div className="listingRow__label">{ label }</div>
            }
            <div className="listingRow__wrapper">
               { featuredTile &&
                  <ListingTile tile={ featuredTile[0] } isFeatured={ true } label={ label } />
               }
               { listingTiles &&
                  <>
                     { tiles }
                  </>
               }
            </div>
         </div>
      )
   })

   return (
      <div className="listings">
         { listings }
      </div>
   )
}

export const ListingTile = ({ tile, label, isFeatured = false }) => {
   const { title, links, description = null } = tile

   const linkList = links.map( (tileLink, index) => {
      const { link: { title: linkTitle, target, url } } = tileLink

      return (
         <Link className="listingTile__link" to={ url } target={ target } key={ `${linkTitle}-${index}` } aria-label={ `${label ? label : ''}: ${ title } - ${ linkTitle }`}>
            { linkTitle }
            <span>
               <IconArrowDouble />
            </span>
         </Link>
      )
   })

   return (
      <div className={ `listingTile ${ isFeatured ? '-featured' : '' }` }>
         <div className="listingTile__title">{ title }</div>
         { description &&
            <div className="listingTile__text">{ description }</div>
         }
         { links &&
            <div className="listingTile__linkList">
               { linkList }
            </div>
         }

      </div>
   )
}