[#140382397] #12 Page lowongan

assets/js/components/Lowongan.jsx

+import React from 'react';
+import { Button, Image as ImageComponent, Item } from 'semantic-ui-react'
+import ModalPendaftaran from './ModalPendaftaran';
+
+
+//const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
+
+export default class Lowongan extends React.Component{
+ static propTypes = {
+    header: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+    ]).isRequired,
+    content: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+    ]).isRequired,
+     image: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+    ]).isRequired,
+     paragraph: React.PropTypes.string.isRequired
+  };
+
+ render(){
+     return(
+
+         <Item.Group relaxed>
+            <Item>
+              {this.props.image}
+              <Item.Content verticalAlign="middle">
+                <Item.Header>{this.props.header}</Item.Header>
+                <Item.Description>{this.props.content}</Item.Description>
+                <Item.Extra>
+                  <div className="daftar">
+                    <ModalPendaftaran content={this.props.paragraph} header="Pendaftaran Lowongan" buttontTitle="Daftar" />
+                  </div>
+                </Item.Extra>
+              </Item.Content>
+            </Item>
+         </Item.Group>
+     );
+ }
+}
\ No newline at end of file

assets/js/components/ModalPendaftaran.jsx

+import React from 'react';
+import { Modal, Button, Icon, TextArea, Form } from 'semantic-ui-react';
+import ModalAlert from './ModalAlert';
+
+
+export default class ModalPendaftaran extends React.Component {
+  static propTypes = {
+    header: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+    ]).isRequired,
+    content: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+    ]).isRequired,
+    buttontTitle: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+    ]).isRequired,
+  }
+
+  state = { modalOpen: false };
+
+  handleOpen = () => this.setState({
+    modalOpen: true,
+  });
+
+  handleClose = () => this.setState({
+    modalOpen: false,
+  });
+
+  render = () => (
+    <Modal
+      trigger={<Button onClick={this.handleOpen} >{this.props.buttontTitle}</Button>}
+      closeIcon="close"
+      open={this.state.modalOpen}
+      onClose={this.handleClose}
+    >
+
+      <Modal.Header>{this.props.header}</Modal.Header>
+      <Modal.Content image>
+        <div className="image">
+          <Icon name="right arrow" />
+        </div>
+        <Modal.Description>
+          <Modal.Header> <h3> Deskripsi Lowongan </h3></Modal.Header>
+          {this.props.content}
+
+          <div className="linkCV">
+            <a> your latest CV </a>
+          </div>
+
+          <div className="coverLetter">
+            <h5> Write your Cover Letter </h5>
+            <Form>
+              <TextArea placeholder="Tell us more" />
+            </Form>
+          </div>
+
+        </Modal.Description>
+      </Modal.Content>
+      <Modal.Actions>
+        <ModalAlert onChangeValue={this.handleClose} header="Pendaftaran" content="Terima kasih sudah mendaftar!" />
+      </Modal.Actions>
+    </Modal>
+    )
+}
+