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