1- import React , { PropTypes } from 'react' ;
2- import Box from 'grommet-udacity/components/Box' ;
3- import Paragraph from 'grommet-udacity/components/Paragraph' ;
4- import Article from 'grommet-udacity/components/Article' ;
5- import Heading from 'grommet-udacity/components/Heading' ;
6- import Markdown from 'grommet-udacity/components/Markdown' ;
7- import Section from 'grommet-udacity/components/Section' ;
8- import List from 'grommet-udacity/components/List' ;
9- import ListItem from 'grommet-udacity/components/ListItem' ;
10- import Anchor from 'grommet-udacity/components/Anchor' ;
1+ // @flow
2+ import React from 'react' ;
3+ import Box from 'grommet/components/Box' ;
4+ import Paragraph from 'grommet/components/Paragraph' ;
5+ import Article from 'grommet/components/Article' ;
6+ import Heading from 'grommet/components/Heading' ;
7+ import Markdown from 'grommet/components/Markdown' ;
8+ import Section from 'grommet/components/Section' ;
9+ import List from 'grommet/components/List' ;
10+ import ListItem from 'grommet/components/ListItem' ;
11+ import Anchor from 'grommet/components/Anchor' ;
1112import { Divider } from 'components' ;
1213import readme from './_readme.md' ;
1314
14- const About = ( {
15- links,
16- } ) => (
17- < Box align = "center" >
18- < Article align = "center" className = "panel" pad = "large" >
19- < Section align = "center" justify = "center" >
20- < Heading >
21- Scalable React Boilerplate
22- </ Heading >
23- < Divider />
24- </ Section >
25- < Section align = "center" justify = "center" >
26- < Paragraph >
27- This project was created to give the Udacity Alumni development team an
28- incredibly optimized and easy to use React starter project. Included
29- below is the documentation for the project.
30- </ Paragraph >
31- < Heading tag = "h4" align = "center" >
32- Since making this boilerplate, it has been used in dozens of projects.
33- </ Heading >
34- < Box align = "center" pad = "medium" >
35- < List >
36- { links . map ( ( link , i ) =>
37- < ListItem key = { i } >
38- < Anchor href = { link . url } >
39- { link . name }
40- </ Anchor >
41- </ ListItem > ,
42- ) }
43- </ List >
44- </ Box >
45- </ Section >
46- { typeof readme === 'string' &&
47- < Markdown content = { readme } />
48- }
49- </ Article >
50- </ Box >
51- ) ;
52-
53- About . propTypes = {
54- links : PropTypes . arrayOf (
55- PropTypes . shape ( {
56- name : PropTypes . string . isRequired ,
57- url : PropTypes . string . isRequired ,
58- } ) ,
59- ) ,
15+ type AboutLink = {
16+ name : string ,
17+ url : string
6018} ;
6119
62- export default About ;
20+ export default function About ( props : {
21+ links: AboutLink [ ] ,
22+ } ) {
23+ return (
24+ < Box align = "center" >
25+ < Article align = "center" className = "panel" pad = "large" >
26+ < Section align = "center" justify = "center" >
27+ < Heading >
28+ Scalable React Boilerplate
29+ </ Heading >
30+ < Divider />
31+ </ Section >
32+ < Section align = "center" justify = "center" >
33+ < Paragraph >
34+ This project was created to give the Udacity Alumni development team an
35+ incredibly optimized and easy to use React starter project. Included
36+ below is the documentation for the project.
37+ </ Paragraph >
38+ < Heading tag = "h4" align = "center" >
39+ Since making this boilerplate, it has been used in dozens of projects.
40+ </ Heading >
41+ < Box align = "center" pad = "medium" >
42+ < List >
43+ { props . links && props . links . map ( link =>
44+ < ListItem key = { link . url } >
45+ < Anchor href = { link . url } >
46+ { link . name }
47+ </ Anchor >
48+ </ ListItem > ,
49+ ) }
50+ </ List >
51+ </ Box >
52+ </ Section >
53+ { typeof readme === 'string' &&
54+ < Markdown content = { readme } />
55+ }
56+ </ Article >
57+ </ Box >
58+ ) ;
59+ }
0 commit comments