Metadata attribution for TheTVDB

frontend/src/Settings/MetadataSource/MetadataSourceSettings.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import TheTvdb from './TheTvdb';
+
+function MetadataSourceSettings() {
+  return (
+    <PageContent title="Metadata Source Settings">
+      <SettingsToolbarConnector
+        showSave={false}
+      />
+
+      <PageContentBody>
+        <TheTvdb />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default MetadataSourceSettings;

frontend/src/Settings/MetadataSource/TheTvdb.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+}
+
+.info {
+  margin-left: 30px;
+}
+
+.title {
+  margin-bottom: 20px;
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.image {
+  width: 213px;
+  height: 123px;
+}

frontend/src/Settings/MetadataSource/TheTvdb.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import styles from './TheTvdb.css';
+
+function TheTvdb(props) {
+  return (
+    <div className={styles.container}>
+      <img
+        className={styles.image}
+        src={`${window.Sonarr.urlBase}/Content/Images/thetvdb.png`}
+      />
+
+      <div className={styles.info}>
+        <div className={styles.title}>
+          TheTVDB
+        </div>
+
+        <div>
+          Series and episode information is provided by TheTVDB.com. <Link to="https://www.thetvdb.com/subscribe">Please consider supporting them.</Link>
+        </div>
+      </div>
+
+    </div>
+  );
+}
+
+export default TheTvdb;