[Glitch] Change about page to be mounted in the web UI

Port 1bd00036c284bcafb419eaf80347ba49d1b491d9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

1 files changed, 33 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/components/image.js b/app/javascript/flavours/glitch/components/image.js
new file mode 100644
index 000000000..6e81ddf08
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/image.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Blurhash from './blurhash';
+import classNames from 'classnames';
+
+export default class Image extends React.PureComponent {
+
+  static propTypes = {
+    src: PropTypes.string,
+    srcSet: PropTypes.string,
+    blurhash: PropTypes.string,
+    className: PropTypes.string,
+  };
+
+  state = {
+    loaded: false,
+  };
+
+  handleLoad = () => this.setState({ loaded: true });
+
+  render () {
+    const { src, srcSet, blurhash, className } = this.props;
+    const { loaded } = this.state;
+
+    return (
+      <div className={classNames('image', { loaded }, className)} role='presentation'>
+        {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
+        <img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} />
+      </div>
+    );
+  }
+
+}