github.com/wawandco/oxpecker@v1.5.7-0.20210910201653-5958d4afdd89/docs/web/src/components/HomepageFeatures.js (about)

     1  import React from 'react';
     2  import clsx from 'clsx';
     3  import styles from './HomepageFeatures.module.css';
     4  
     5  const FeatureList = [
     6    {
     7      title: 'Easy to Use',
     8      Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
     9      description: (
    10        <>
    11          Docusaurus was designed from the ground up to be easily installed and
    12          used to get your website up and running quickly.
    13        </>
    14      ),
    15    },
    16    {
    17      title: 'Focus on What Matters',
    18      Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
    19      description: (
    20        <>
    21          Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
    22          ahead and move your docs into the <code>docs</code> directory.
    23        </>
    24      ),
    25    },
    26    {
    27      title: 'Powered by React',
    28      Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
    29      description: (
    30        <>
    31          Extend or customize your website layout by reusing React. Docusaurus can
    32          be extended while reusing the same header and footer.
    33        </>
    34      ),
    35    },
    36  ];
    37  
    38  function Feature({Svg, title, description}) {
    39    return (
    40      <div className={clsx('col col--4')}>
    41        <div className="text--center">
    42          <Svg className={styles.featureSvg} alt={title} />
    43        </div>
    44        <div className="text--center padding-horiz--md">
    45          <h3>{title}</h3>
    46          <p>{description}</p>
    47        </div>
    48      </div>
    49    );
    50  }
    51  
    52  export default function HomepageFeatures() {
    53    return (
    54      <section className={styles.features}>
    55        <div className="container">
    56          <div className="row">
    57            {FeatureList.map((props, idx) => (
    58              <Feature key={idx} {...props} />
    59            ))}
    60          </div>
    61        </div>
    62      </section>
    63    );
    64  }