Replace Backbone with React lightbox
This commit is contained in:
parent
cb94d09ef9
commit
4a5a2cb5c1
7 changed files with 75 additions and 79 deletions
40
ts/components/Lightbox.tsx
Normal file
40
ts/components/Lightbox.tsx
Normal file
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* @prettier
|
||||
*/
|
||||
import React from 'react';
|
||||
|
||||
|
||||
interface Props {
|
||||
imageURL?: string;
|
||||
onClose: () => void;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 20,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
image: {
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'cover',
|
||||
}
|
||||
};
|
||||
|
||||
export class Lightbox extends React.Component<Props, {}> {
|
||||
public render() {
|
||||
const { imageURL } = this.props;
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<img
|
||||
style={styles.image}
|
||||
src={imageURL}
|
||||
/>
|
||||
<button onClick={this.props.close}>Close</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue