{"size": 1686, "ext": "js", "max_stars_repo_path": "documentation/src/components/HomepageDependencies.js", "max_stars_repo_name": "joam05/RN-Starter-Boilerplate", "max_stars_repo_stars_event_min_datetime": "2018-09-25T12:30:10.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-31T11:33:05.000Z", "max_issues_repo_path": "documentation/src/components/HomepageDependencies.js", "max_issues_repo_name": "joam05/RN-Starter-Boilerplate", "max_issues_repo_issues_event_min_datetime": "2018-09-27T18:31:22.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T06:01:01.000Z", "max_forks_repo_path": "documentation/src/components/HomepageDependencies.js", "max_forks_repo_name": "joam05/RN-Starter-Boilerplate", "max_forks_repo_forks_event_min_datetime": "2018-09-28T19:10:44.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-30T08:19:57.000Z"}
{"max_stars_count": 3000, "max_issues_count": 192, "max_forks_count": 734, "avg_line_length": 26.34375, "max_line_length": 94, "alphanum_fraction": 0.5854092527}
import React from 'react';
import clsx from 'clsx';
import styles from './HomepageDependencies.module.css';
import useBaseUrl from '@docusaurus/useBaseUrl';

const DependencyList = [
  {
    title: 'Redux',
    Svg: require('../../static/img/dependencies/redux.svg').default,
  },
  {
    title: 'React-Navigation',
    Svg: require('../../static/img/dependencies/react-navigation.svg').default,
  },
  {
    title: 'Flipper',
    path: '/img/dependencies/flipper.png',
  },
  {
    title: 'Prettier',
    Svg: require('../../static/img/dependencies/prettier.svg').default,
  },
  {
    title: 'Eslint',
    Svg: require('../../static/img/dependencies/eslint.svg').default,
  },
  {
    title: 'I18next',
    Svg: require('../../static/img/dependencies/i18next.svg').default,
  },
];

function Dependency({Svg, path, title}) {
  return (
    <div className={clsx('col col--2')}>
      <div className="text--center">
        { path && <img className={styles.dependencySvg} src={useBaseUrl(path)} alt={title}/> }
        { Svg && <Svg className={styles.dependencySvg} alt={title} />}
      </div>
      <div className="text--center padding-horiz--md">
        <p className="text--bold text--secondary">{title}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <>
      <h1 className="text--center text--primary">Based on solid libraries 🏗️</h1>
      <section className={styles.dependencies}>
        <div className="container">
          <div className="row">
            {DependencyList.map((props, idx) => (
              <Dependency key={idx} {...props} />
            ))}
          </div>
        </div>
      </section>
    </>

  );
}
