/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */ import clsx from "clsx" ; import React from "react" ; import styles from "./HomepageFeatures.module.css" ; type FeatureItem = { title : string ; image : string ; description : JSX . Element ; } ; const FeatureList = [ { title : "Easy to Use" , image : "/img/undraw_docusaurus_mountain.svg" , description : ( < > Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly . < />) } , { title : "Focus on What Matters" , image : "/img/undraw_docusaurus_tree.svg" , description : ( < > Docusaurus lets you focus on your docs , and we & apos ; ll do the chores . Go ahead and move your docs into the < code > docs < /code> directory. < />) } , { title : "Powered by React" , image : "/img/undraw_docusaurus_react.svg" , description : ( < > Extend or customize your website layout by reusing React . Docusaurus can be extended while reusing the same header and footer . < />) } ] ; function Feature ( { title , image , description } ) { return ( < div className = { clsx ( "col col--4" ) } > < div className = "text--center" > < img className = { styles . featureSvg } alt = { title } src = { image } / > < /div> < div className = "text--center padding-horiz--md" > < h3 > { title } < /h3> < p > { description } < /p> < /div> < /div>); } export default function HomepageFeatures ( ) { return ( < section className = { styles . features } > < div className = "container" > < div className = "row" > { FeatureList . map ( ( props , idx ) => ( < Feature key = { idx } { ... props } / > ) ) } < /div> < /div> < /section>); }