[#22] [#140652771] Page profile Student

assets/js/ProfilePage.jsx

+import React from 'react';
+import { Segment, Image, Header, Icon, Container, Button,  Form } from 'semantic-ui-react';
+
+export default class ProfilePage extends React.Component {
+
+  render() {
+    return (
+      <div className="profilePage">
+        <Segment className="biodata-section">
+
+          <Header as="h2" icon textAlign="center">
+            <Image src="http://semantic-ui.com/images/wireframe/square-image.png" size="small" shape="circular" />
+          </Header>
+
+
+          <Container textAlign="center" className="profile-biodata">
+
+            <div className="biodata">
+              <h3> Students Name </h3>
+              <h5> Ilmu Komputer, Fakultas Ilmu Komputer </h5>
+              <h5> jojon@ui.ac.id </h5>
+              <h5> 08123456789 </h5>
+              <h5> Jakarta, 30 Februari 1945 </h5>
+            </div>
+
+            <div className="button-profile">
+            <Button primary size="small">Resume</Button>
+            <Button primary size="small">Transkrip</Button>
+            </div>
+
+          </Container>
+
+
+        </Segment >
+
+        <Segment className="profile-form">
+            <Header as='h3' textAlign='center'>
+              <Icon name='edit'  />
+              <Header.Content>
+                Edit Profile Page
+              </Header.Content>
+            </Header>
+
+            <Form size="small">
+                <Form.Field>
+                  <label>Email</label>
+                  <input placeholder='jojon@email.com' />
+                </Form.Field>
+
+                <Form.Field>
+                  <label>No Hp</label>
+                  <input placeholder='08123456789' />
+                </Form.Field>
+
+                <Form.Field>
+                  <label>Resume</label>
+                  <input placeholder='Resume' type="File"/>
+                </Form.Field>
+
+                <Button type='submit' size="small" primary floated="right">Submit</Button>
+              </Form>
+
+        </Segment>
+
+      </div>
+
+    );
+  }
+}