Initial commit

client/src/components/Settings/Upstream.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Card from '../ui/Card';
+
+export default class Upstream extends Component {
+    handleChange = (e) => {
+        const { value } = e.currentTarget;
+        this.props.handleUpstreamChange(value);
+    };
+
+    handleSubmit = (e) => {
+        e.preventDefault();
+        this.props.handleUpstreamSubmit();
+    };
+
+    render() {
+        return (
+            <Card
+                title="Upstream DNS servers"
+                subtitle="If you keep this field empty, AdGuard will use <a href='https://1.1.1.1/' target='_blank'>Cloudflare DNS</a> as an upstream."
+                bodyType="card-body box-body--settings"
+            >
+                <div className="row">
+                    <div className="col">
+                        <form>
+                            <textarea
+                                className="form-control"
+                                value={this.props.upstream}
+                                onChange={this.handleChange}
+                            />
+                            <div className="card-actions">
+                                <button
+                                    className="btn btn-success btn-standart"
+                                    type="submit"
+                                    onClick={this.handleSubmit}
+                                >
+                                    Apply
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </Card>
+        );
+    }
+}
+
+Upstream.propTypes = {
+    upstream: PropTypes.string,
+    handleUpstreamChange: PropTypes.func,
+    handleUpstreamSubmit: PropTypes.func,
+};