1. import React from 'react';
2. import 'react-bulma-components/dist/react-bulma-components.min.css';
3. import {
4.         Section,
5.         Heading,
6.         Columns,
7.         Card,
8.         Table,
9.         Button
10. } from 'react-bulma-components';
11.  
12.  
13.  
14. class MemberPage extends React.Component {
15.         render()
16.         {
17.                 const sectionStyle = {
18.                         paddingTop: "3em",
19.                         paddingBottom: "3em"
20.                 };
21.  
22.                 return (
23.                         <Section size="medium" style={ sectionStyle }>
24.                                 <Heading>Members</Heading>
25.                                 <Columns>
26.                                         <Columns.Column size={4}>
27.                                                 <Card>
28.                                                         <Card.Header>
29.                                                                 <Card.Header.Title>Add Member</Card.Header.Title>
30.                                                         </Card.Header>
31.                                                         <Card.Content>
32.                                                                 <form>
33.                                                                         <div className="field">
34.                                                                                 <label>First Name</label>
35.                                                                                 <div className="control">
36.                                                                                         <input class="input" type="text" />
37.                                                                                 </div>
38.                                                                         </div>
39.                                                                         <div className="field">
40.                                                                                 <label>Last Name</label>
41.                                                                                 <div className="control">
42.                                                                                         <input className="input" type="text" />
43.                                                                                 </div>
44.                                                                         </div>
45.                                                                         <div className="field">
46.                                                                                 <label>Position Name</label>
47.                                                                                 <div className="control">
48.                                                                                         <input className="input" type="text" />
49.                                                                                 </div>
50.                                                                         </div>
51.                                                                         <div className="field">
52.                                                                                 <label>Team</label>
53.                                                                                 <div className="control">
54.                                                                                     <div className="select is-fullwidth">
55.                                                                                         <select>
56.                                                                                                 <option>Select Team</option>
57.                                                                                                 <option>A team</option>
58.                                                                                                 <option>B team</option>
59.                                                                                                 <option>C team</option>
60.                                                                                         </select>
61.                                                                                     </div>
62.                                                                                 </div>
63.                                                                         </div>
64.                                                                         <Button className="button is-link is-success">
65.                                                                                 Add
66.                                                                         </Button>
67.                                                                 </form>
68.                                                         </Card.Content>
69.                                                 </Card>
70.                                         </Columns.Column>
71.                                         <Columns.Column size={8}>
72.                                                 <Card>
73.                                                         <Card.Header>
74.                                                                 <Card.Header.Title>
75.                                                                         Member List
76.                                                                 </Card.Header.Title>
77.                                                         </Card.Header>
78.                                                         <Card.Content>
79.                                                                 <Table className="table is-fullwidth is-bordered is-striped is-hoverable">
80.                                                                         <thead>
81.                                                                                 <th size={4}>Member Name</th>
82.                                                                                 <th>Position</th>
83.                                                                                 <th>Team</th>
84.                                                                                 <th>Action</th>
85.                                                                         </thead>
86.                                                                         <tbody>
87.                                                                                 <tr>
88.                                                                                         <td>Sample</td>
89.                                                                                         <td>Sample</td>
90.                                                                                         <td>Sample</td>
91.                                                                                         <td>Sample</td>
92.                                                                                 </tr>
93.                                                                         </tbody>
94.                                                                 </Table>
95.                                                         </Card.Content>
96.                                                 </Card>
97.                                         </Columns.Column>
98.                                 </Columns>
99.                         </Section>
100.                 )
101.         }
102. }
103.  
104. export default MemberPage;