|
| 1 | +import React from 'react'; |
| 2 | +import classnames from 'classnames'; |
| 3 | +import Layout from '@theme/Layout'; |
| 4 | +import Link from '@docusaurus/Link'; |
| 5 | +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; |
| 6 | +import useBaseUrl from '@docusaurus/useBaseUrl'; |
| 7 | +import styles from './styles.module.css'; |
| 8 | + |
| 9 | +const features = [ |
| 10 | + { |
| 11 | + title: <>Easy to Use</>, |
| 12 | + imageUrl: 'img/undraw_the_world_is_mine_nb0e.svg', |
| 13 | + description: ( |
| 14 | + <> |
| 15 | + EasyButton is small and does not depend on third party libraries making it very easy to install and include in your project. |
| 16 | + </> |
| 17 | + ), |
| 18 | + }, |
| 19 | + { |
| 20 | + title: <>Non-blocking</>, |
| 21 | + imageUrl: 'img/undraw_season_change_f99v.svg', |
| 22 | + description: ( |
| 23 | + <> |
| 24 | + EasyButton is a non-blocking library, |
| 25 | + which means it won't affect the rest of your code with |
| 26 | + dangerous delays that impact the overall performance of your code. |
| 27 | + </> |
| 28 | + ), |
| 29 | + }, |
| 30 | + { |
| 31 | + title: <>Intuitive API</>, |
| 32 | + imageUrl: 'img/undraw_control_panel1_20gm.svg', |
| 33 | + description: ( |
| 34 | + <> |
| 35 | + Handling buttons is a simple task on arduino, but the code can look very ugly, full of conditions and delays that are not safe at all. |
| 36 | + EasyButton not only saves you development time, it also provides an easy and intuitive API for handling buttons with callbacks. |
| 37 | + </> |
| 38 | + ), |
| 39 | + }, |
| 40 | +]; |
| 41 | + |
| 42 | +function Feature({imageUrl, title, description}) { |
| 43 | + const imgUrl = useBaseUrl(imageUrl); |
| 44 | + return ( |
| 45 | + <div className={classnames('col col--4', styles.feature)}> |
| 46 | + {imgUrl && ( |
| 47 | + <div className="text--center"> |
| 48 | + <img className={styles.featureImage} src={imgUrl} alt={title} /> |
| 49 | + </div> |
| 50 | + )} |
| 51 | + <h3>{title}</h3> |
| 52 | + <p>{description}</p> |
| 53 | + </div> |
| 54 | + ); |
| 55 | +} |
| 56 | + |
| 57 | +function Home() { |
| 58 | + const context = useDocusaurusContext(); |
| 59 | + const {siteConfig = {}} = context; |
| 60 | + return ( |
| 61 | + <Layout |
| 62 | + title={`${siteConfig.title}`} |
| 63 | + description="The Arduino Library For Buttons"> |
| 64 | + <header className={classnames('hero hero--primary', styles.heroBanner)}> |
| 65 | + <div className="container"> |
| 66 | + <h1 className="hero__title">{siteConfig.title}</h1> |
| 67 | + <p className="hero__subtitle">{siteConfig.tagline}</p> |
| 68 | + <div className={styles.buttons}> |
| 69 | + <Link |
| 70 | + className={classnames( |
| 71 | + 'button button--outline button--secondary button--lg', |
| 72 | + styles.getStarted, |
| 73 | + )} |
| 74 | + to={'https://github.com/evert-arias/EasyButton/releases'}> |
| 75 | + Download |
| 76 | + </Link> |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + </header> |
| 80 | + <main> |
| 81 | + {features && features.length && ( |
| 82 | + <section className={styles.features}> |
| 83 | + <div className="container"> |
| 84 | + <div className="row"> |
| 85 | + {features.map((props, idx) => ( |
| 86 | + <Feature key={idx} {...props} /> |
| 87 | + ))} |
| 88 | + </div> |
| 89 | + </div> |
| 90 | + </section> |
| 91 | + )} |
| 92 | + </main> |
| 93 | + </Layout> |
| 94 | + ); |
| 95 | +} |
| 96 | + |
| 97 | +export default Home; |
0 commit comments